How to store values of selected checkboxes in array in React js?-CodePudding

I make table contain students names, and checkbox for every row in the table, I want so store the students names that checked in the (students) array. How can I do that?

const [data, setData] = useState([]);  
    const [students, setStudents] = useState([]);  

    
  useEffect(() => {  
    Axios  
        .get("http://localhost:3003/studentsnotinsections")  
        .then(result => setData(result.data));  
}, []);  

console.log(students)
return(
  <div>
 <table className="table" >  
                <thead className="thead-dark">  
                    <tr>  
                        <th scope="col">Name</th>  
                    </tr>  
                </thead>  
                <tbody>                      
                    {data.map((item, id) => {  
                        return <tr key={id}>
                            <td>{item.FullName}</td> 
                            <td><input type="checkbox" /></td> 
                        </tr>  
                    })}  
                </tbody>  
            </table>
  </div>
)}

CodePudding user response：

Did you try simply adding onclick function to your checkbox?

const Compon = () => {
  const [data, setData] = useState([]);  
  const [students, setStudents] = useState([]);  
  
      
  useEffect(() => {  
    Axios  
        .get("http://localhost:3003/studentsnotinsections")  
        .then(result => setData(result.data));  
  }, []);  
  const addOrRemove = (name) => {
    const newStudents = [...students];
    const index = newStudents.indexOf(name);
    if (index === -1) {
      newStudents.push(name);
    } else {
      newStudents.splice(index, 1);
    }
    setStudents(newStudents);
    console.log(students)
  }
  
  return(
    <div>
     <table className="table" >  
        <thead className="thead-dark">  
            <tr>  
                <th scope="col">Name</th>  
            </tr>  
         </thead>  
        <tbody>                      
            {data.map((item, id) => {  
                return <tr key={id}>
                    <td>{item.FullName}</td> 
                    <td><input type="checkbox" onClick={() => addOrRemove(item.FullName)} /></td> 
                </tr>  
            })}  
        </tbody>  
      </table>
     </div>
  )
  }

CodePudding user response：

You could use onChange handler, it's more standard for input handling that onClick

import { useCallback, useState } from "react";

export default function App() {
  const [data, setData] = useState([
    {FullName: 'Alex'},
    {FullName: 'Richard'}
  ]);  
  const [students, setStudents] = useState([]);  

  let toggleValue = useCallback((event, id) => {
     if (event.target.checked) {
       setStudents(value => [...value, id])
     } else {
       setStudents(value => value.filter(it => it !== id))
     }
  }, [setStudents])

  console.log(students)
  return(
    <div>
      <table className="table" >  
        <thead className="thead-dark">  
          <tr>  
            <th scope="col">Name</th>  
          </tr>  
        </thead>  
        <tbody>                      
          {data.map((item, id) => {  
            return <tr key={id}>
                     <td>{item.FullName}</td> 
                     <td><input type="checkbox" onChange={(e) => toggleValue(e, id)} /></td> 
                   </tr>  
          })}  
        </tbody>  
      </table>
    </div>
)
}