title: How to work with multiple checkboxes in react and collect the checked checkboxes
body: <p>I'm currently working on a filter component where multiple checkboxes can be selected.</p>
  <p>Now I want to toggle the state of the checkboxes (which is currently possible and works) and store the checked checkboxes in an array.</p>
  <p>If a checkbox is unchecked, it should of course be removed from the array. I've tried the useState hook, but without success --&gt; The checkboxes are added multiple times and the unchecked ones are not removed..</p>
  <p><strong>Here is the current status:</strong></p>
  <pre><code>  // Here I'm creating an array with a fixed size (based on the received data)
    const [checkboxState, setCheckboxState] = useState(new Array(receivedData.length).fill(false));
    // With this useState I wan't to collect the checked checkboxes
    const [checkedCheckboxes, setCheckedCheckboxes] = useState([]);
      
    // This is my handler method that gets triggered when a checkbox get's checked/unchecked
    // ..and toggles the state of the checkbox
    const handleCheckboxState = (position: number) =&gt; {
      const updatedCheckedState = checkboxState.map((item, index) =&gt; (index === position ? !item : item));
      setCheckboxState(updatedCheckedState);
      collectCheckedCheckboxes();
    };
  
    // With this method I wan't to push the checked checkboxes into the array
    // ..and remove the unchecked ones
    const collectCheckedCheckboxes = () =&gt; {
      checkboxState.map((item, index) =&gt; {
        if (item === true) {
          return checkedCheckboxes.push(receivedData[index]);
        } else {
          return checkedCheckboxes.slice(index, 1);
        }
      });
    };
  </code></pre>
  <p><strong>The checkboxes are rendered like this:</strong></p>
  <pre><code>  &lt;div className=&quot;checkboxes&quot;&gt;
      {receivedData?.map((data, index) =&gt; (
        &lt;CheckBox
          value={data.value}
          checked={checkboxState[index]}
          onChange={() =&gt; handleCheckboxState(index)}
        /&gt;
      ))}
    &lt;/div&gt;
  </code></pre>
  <p>What am I doing wrong?</p>