How can I use checkbox form in react?

Question

There are two components container and presenter.
The code below shows a single checkbox state becomes true and the other checkbox is also getting updated.So, how to handle multiple checkbox with state?

Container:

 export default class ApplyFormContainer extends Component {
      constructor(props) {
        super(props);
        this.state = {
          form: {
            gender: '',
            checked: false,
          },
        };
      }
      handleCheckBox = e => {
        const {
          target: { checked },
        } = e;
        this.setState({
          form: {
            ...this.state.form,
            checked,
          },
        });
      };
      handleGender = id => {
        this.setState({
          form: {
            ...this.state.form,
            gender: id,
          },
        });
      };

      render() {
        const { handleGender, handleCheckBox } = this;
        const { form } = this.state;
        return (
          <Container>
            <ApplyFormPresenter
              form={form}
              handleGender={handleGender}
              handleCheckBox={handleCheckBox}
            />
          </Container>
        );
      }
    }

Presenter:

import React from 'react';
import styled from 'styled-components';

const Form = styled.form`
  display: grid;
`;
const Flex = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  label {
    margin: 2rem;
    /* input[type='checkbox'] {
      display: none;
    }
  } */
  }
`;

const ApplyFormPresenter = ({ form, handleGender, handleCheckBox }) => {
  return (
    <div>
      <Form>
        <Flex>
          <label>
            <span>TEST</span>
            <input
              type="checkbox"
              value="love"
              onChange={handleCheckBox}
              checked={form.checked}
            />
          </label>{' '}
          <label>
            <span>TEST</span>
            <input
              type="checkbox"
              value="friend"
              onChange={handleCheckBox}
              checked={form.checked}
            />
          </label>{' '}
          <label>
            <span>TEST</span>
            <input
              type="checkbox"
              value="money"
              onChange={handleCheckBox}
              checked={form.checked}
            />
          </label>
        </Flex>
      </Form>
    </div>
  );
};

Tom Bombadil · Accepted Answer · 2021-03-02 21:21:10Z

6

There are several ways to do this. My suggestion: You want to save the values in an object and map over its keys.

Here is a solution using Hooks:

function App() {
  const [state, setState] = React.useState({
    gender: false,
    love: false
  });

  const handleToggle = ({ target }) =>
    setState(s => ({ ...s, [target.name]: !s[target.name] }));

  return (
    <div>
      {Object.keys(state).map(key => (
        <input
          type="checkbox"
          onChange={handleToggle}
          key={key}
          name={key}
          checked={state[key]}
        />
      ))}
    </div>
  );
}

edited Mar 2, 2021 at 21:21

Tom Bombadil

4,0451 gold badge17 silver badges24 bronze badges

answered May 3, 2019 at 11:29

J. Hesters

15k36 gold badges156 silver badges272 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Metehan Senol · Accepted Answer · 2019-05-03 11:29:58Z

3

You can use this handleInputChange method on your checkbox events;

  handleInputChange = (event) => {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

define your state variables like below;

this.state = {
  love: false,
  friend: false,
  money: false
};

And set onChange event of your checkbox with id and name parameter same as your state;

<input
  type="checkbox"
  id="friend"
  name="friend"
  onChange={this.handleInputChange}
  checked={this.state.friend}
/>

And you can access them like below;

let value = this.state.friend

answered May 3, 2019 at 11:29

Metehan Senol

6696 silver badges13 bronze badges

Collectives™ on Stack Overflow

How can I use checkbox form in react?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related