How To Check Checkbox Individually In A Map Array?

Hello I'm creating a table with .map this is how it looks: I'm experimenting with checkbox I want to send all that data to another piece of code I'm working on did a few attempts

Solution 1:

Since you have an array of data where you are pushing the "estudiante.uid". You can use this array as condition. For example to check the checkbox when a student is added and unchecked when is deleted. I can see you have that data in the state, so:

const [studentID, setStudentID] = useState([])

constsetStudent = (estudiante, index) => {     
if(!studentID.find(id => id === estudiante){
     setStudentID([ ... studentID, estudiante]); // adds a student id// let data = studentID; //This can go// data.push(estudiante); //This can go console.log("Hi I'm True")
     console.log(estudiante, check, index)
  }  
   else {
    setStudentID(studentID.filter(studentId => studentId !== estudiante)) 
    //deletes a student idconsole.log("Hi I'm False")
       console.log(estudiante, check, index)
    }  
}

//Map
<tbody>
  {estudiantes.map((estudiante, index) => (
  <tr><td><Checkboxchecked={studentID.find(id => id === estudiante.uid)}
  color = "primary"
  id = "checkBox"
  onChange = {() => setStudent(estudiante.uid, index)}
  inputProps={{ 'aria-label': 'controlled' }}
  />
  </td><td>{estudiante.name}</td><td>{estudiante.school}</td><td>{estudiante.grade}</td><td><ButtonstartIcon = {<DeleteIcon />}
   size = "medium"
   variant = "contained"
   color = "secondary"
   onClick = { ()=>{deleteProduct(estudiante.uid)}}>
   Borrar
   </Button></td></tr>
   ))}
 </tbody>

Solution 2:

Ok thats the point, you created checked state as a boolean, that means that all the elements of the mapped array will inherit that boolean state, so when the state changes to true, all the elements will have the checked state set to true. If you want to deal with multiple checkbox you should have to initialize the checked state as an array with the same number of elements as the estudiantes array as you did with studentId.

This post explains it well https://www.freecodecamp.org/news/how-to-work-with-multiple-checkboxes-in-react/