title: Separate checkbox for each table row in React.js
body: <p>I have a functional component which returns a table with many rows like this:</p>
  <pre><code>import React from &quot;react&quot;;
  import Checkbox from &quot;@material-ui/core/Checkbox&quot;;
  
  function Table({ data }) {
      const [checked, setChecked] = useState(false);
      const handleChange = (event) =&gt; {
          setChecked(event.target.checked);
      };
  
  return (
      // Some table head code
      &lt;TableBody&gt;
          {data.map((row) =&gt; (
              &lt;TableRow key={row.id}&gt;
                  &lt;TableCell align=&quot;left&quot;&gt;
                      &lt;Checkbox
                          checked={checked}
                          onChange={handleChange}
                          inputProps={{ &quot;aria-label&quot;: &quot;primary checkbox&quot; }}
                      /&gt;
                  &lt;/TableCell&gt;
              &lt;/TableRow&gt;
              // More table row code here
          ))}
      &lt;/TableBody&gt;
    );
  }
  </code></pre>
  <p>Each row has a checkbox. The problem is when I click on a checkbox, all other checkboxes on the other rows are checked. How should I go about this.</p>