title: How to handle the state of multiple checkboxes in child component by the parent in react?
body: <p>I have multiple check-boxes which are dynamic. These check boxes are placed (assume) in &quot;B&quot; component.
  I have managed the state of these check boxes in &quot;A&quot; component which is the parent of &quot;B&quot;.
  <em><strong>When one or all the check boxes are clicked I want to render a div</strong></em></p>
  <p><em><strong>expected result</strong></em> : render div if one or all the check boxes are clicked. If none is selected the div should be hidden. Basically the div should be visible even if a single checkbox is checked.</p>
  <p><em><strong>current result</strong></em> : When one check box is clicked the div gets rendered but if another checkbox is selected the div disappears.</p>
  <p>Here's my A component (Parent)</p>
  <pre><code>const A = () =&gt; {
     const [isChecked, setIsChecked] = useState(false) // state that holds state of check boxes 
  
     return (
        {isChecked ? &lt;div&gt;Some Content..&lt;/div&gt; : null} // rendering the div according to the state of the checkboxes
  
        &lt;Child isChecked={isChecked} setIsChecked={setIsChecked} /&gt;
    ) 
  }
  </code></pre>
  <p>Code of Child Component</p>
  <pre><code> const Child = props =&gt; {
        
          return (
             {checkBoxList.map((box, index) =&gt; (
                &lt;CustomCheckBox
                   key={index}
                   name={`check-box-${index}`}  // to uniquely identify each check box 
                   isChecked={props.isChecked}
                   setIsChecked={props.setIsChecked} /&gt;
             ))}
          )
      }
  </code></pre>
  <p>CustomCheckBox component :</p>
  <pre><code> const CustomCheckBox = props =&gt; {
      
        const onChangeHandler = (event) =&gt; {
           props.isChecked ? props.setIsChecked(false) : props.setIsChecked(true)
        }
      
        return &lt;input name={props.name} type=&quot;checkBox&quot; onChange={onChangeHandler} /&gt;;
   };
      
    CustomCheckBox.propTypes = {
      name: string
    }
  </code></pre>
  <p>I'm aware that the parent component state is only capable of handling a single check box right now.</p>
  <p>The reason for the current result is because of the condition that I have included in <code>onChangeHandler</code> function.</p>
  <pre><code>  props.isChecked ? props.setIsChecked(false) : props.setIsChecked(true)
  </code></pre>
  <p>I'm confused about how to handle the state of multiple check boxes in the above stated scenario using a single handler function !</p>