title: How to get multiple checkbox values in React JS?
body: <p>I'm trying to get values from all selected checkboxes and store them in useState. I was able to get value of the selected row in a table, but I can't store multiple selected values in state. My code is</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  export default function App() {
    const data = [
      {
        id: &quot;1&quot;,
        name: &quot;Jane&quot;,
        lastName: &quot;Doe&quot;,
        age: &quot;25&quot;
      },
      {
        id: &quot;2&quot;,
        name: &quot;James&quot;,
        lastName: &quot;Doe&quot;,
        age: &quot;40&quot;
      },
      {
        id: &quot;3&quot;,
        name: &quot;Alexa&quot;,
        lastName: &quot;Doe&quot;,
        age: &quot;27&quot;
      },
      {
        id: &quot;4&quot;,
        name: &quot;Jane&quot;,
        lastName: &quot;Brown&quot;,
        age: &quot;40&quot;
      }
    ];
  
    const [peopleInfo, setPeopleInfo] = useState([
      {
        id: &quot;&quot;,
        first: &quot;&quot;,
        last: &quot;&quot;,
        age: &quot;&quot;
      }
    ]);
  
    console.log(peopleInfo);
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;table&gt;
          &lt;tr&gt;
            {data.map((item) =&gt; {
              return (
                &lt;div
                  key={item.id}
                  style={{
                    display: &quot;flex&quot;,
                    width: &quot;150px&quot;
                  }}
                &gt;
                  &lt;input
                    onChange={() =&gt; {
                      setPeopleInfo({
                        id: item.id,
                        first: item.first,
                        last: item.last,
                        age: item.age
                      });
                    }}
                    value={peopleInfo}
                    style={{ margin: &quot;20px&quot; }}
                    type=&quot;checkbox&quot;
                  /&gt;
                  &lt;td style={{ margin: &quot;20px&quot; }}&gt;{item.name}&lt;/td&gt;
                  &lt;td style={{ margin: &quot;20px&quot; }}&gt;{item.lastName}&lt;/td&gt;
                  &lt;td style={{ margin: &quot;20px&quot; }}&gt;{item.age}&lt;/td&gt;
                &lt;/div&gt;
              );
            })}
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p>and <a href="https://codesandbox.io/s/inspiring-austin-zv70s?file=/src/App.js:24-1639" rel="nofollow noreferrer">Codesandbox</a></p>
  <p>I'm able to get id, name, last name and age values of the selected row, but when I select new checkbox previous row's info gets updated with the new one. I can't seem to figure out how to store all values from multiple selected checkboxes. Any help and suggestions are greatly appreciated.</p>