title: How to handle multiple checkboxes in React form?
body: <p>I have a form that loads preset checkbox selections from the backend. I query the checkbox menu and iterate over it in JSX. Now I want to be able to select/deselect. To handle this, I start out by creating an array of objects matching the size of menu checkbox items like so:</p>
  <pre><code>useEffect(() =&gt; {
    if (!profile) { // this checks if the reusable form is a create or update. If this is an update, I need to prefill an existing array of objects with added key/value pair of checked: true
      setConcerns(Array(menuItems.length).fill({ checked: false }))
    } 
  }, [menuItems]) // this happens first 
  
  // if it's an update form 
  
  
  useEffect(() =&gt; {
    if (profile) { 
      const updatedConcerns = existingConcerns.map((c, i) =&gt; ({
          ...concerns,
          c.id: c.id,
          checked: true,
        }))
    } 
  }, [existingConcerns]) // this happens second
  </code></pre>
  <p>This sets up the <code>concerns</code> array for toggle.</p>
  <p>In my JSX I have a Checkbox component:</p>
  <pre><code>
   {menuItems &amp;&amp;
       menuItems.map((item: CheckboxProps, index: number) =&gt; (
         &lt;Checkbox
           testID={item?.title}
           label={item?.title}
           checked={concerns &amp;&amp; !!concerns[index]?.checked}
           onValueChange={() =&gt; handleConcerns(index)}
         /&gt;
    ))}
  
  </code></pre>
  <p>And the handleConcerns method so far:</p>
  <pre><code>  const handleConcerns = (index: number) =&gt; {
      const concernsCopy = [...concerns]
      concernsCopy[index].checked = !concernsCopy[index].checked
      setConcerns(concernsCopy)
       // the rest will determine how to add selected items to concerns 
       array for submit
    }
  </code></pre>
  <p>This causes all of the checkboxes to toggle. This is just the start of pushing menu data into each index of <code>concerns</code> array but first need to get the checkboxes working and be able to have an array of chosen indices to submit to backend.</p>