title: How can I use checkbox form in react?
body: <p>There are two components <code>container</code> and <code>presenter</code>.<br/>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?</p>
  
  <p>Container:</p>
  
  <pre><code> export default class ApplyFormContainer extends Component {
        constructor(props) {
          super(props);
          this.state = {
            form: {
              gender: '',
              checked: false,
            },
          };
        }
        handleCheckBox = e =&gt; {
          const {
            target: { checked },
          } = e;
          this.setState({
            form: {
              ...this.state.form,
              checked,
            },
          });
        };
        handleGender = id =&gt; {
          this.setState({
            form: {
              ...this.state.form,
              gender: id,
            },
          });
        };
  
        render() {
          const { handleGender, handleCheckBox } = this;
          const { form } = this.state;
          return (
            &lt;Container&gt;
              &lt;ApplyFormPresenter
                form={form}
                handleGender={handleGender}
                handleCheckBox={handleCheckBox}
              /&gt;
            &lt;/Container&gt;
          );
        }
      }
  </code></pre>
  
  <p>Presenter:</p>
  
  <pre><code>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 }) =&gt; {
    return (
      &lt;div&gt;
        &lt;Form&gt;
          &lt;Flex&gt;
            &lt;label&gt;
              &lt;span&gt;TEST&lt;/span&gt;
              &lt;input
                type="checkbox"
                value="love"
                onChange={handleCheckBox}
                checked={form.checked}
              /&gt;
            &lt;/label&gt;{' '}
            &lt;label&gt;
              &lt;span&gt;TEST&lt;/span&gt;
              &lt;input
                type="checkbox"
                value="friend"
                onChange={handleCheckBox}
                checked={form.checked}
              /&gt;
            &lt;/label&gt;{' '}
            &lt;label&gt;
              &lt;span&gt;TEST&lt;/span&gt;
              &lt;input
                type="checkbox"
                value="money"
                onChange={handleCheckBox}
                checked={form.checked}
              /&gt;
            &lt;/label&gt;
          &lt;/Flex&gt;
        &lt;/Form&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>