How to check checkbox individually in a map array?

Question

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 with input type = 'checkbox' and failed and saw a few tutorials with Material UI Checkbox and decided to use that one cause it seems more reliable.

Now my question is: How can I check the checkbox individually, when I check on one it checks all of them. I know I'm sending the right parameters because the data I'm getting is the correct one, Example:

The UID is correct, it was false which means is correct (because code is not working yet) and finally is the first one (index 0) which means is grabbing all the right parameters, this is how it looks in the database you can see is grabbing the right UID, etc.

If I remove the conditions of my code it also does work, here how it looks (I clicked on both):

The point of my code is to grab the students ID and put them on arrays so I can display them in another piece of code in a map, but for that I need the checkbox to work so that they add students to the Array when is check and to remove that student when is uncheck. I had to explain the whole thing so it makes sense what I'm trying to do, sorry if I took too long to make the question.

All I need is to understand how to make the checkbox works separately, the map array is making it too confusing.

This are the pieces of codes:

//Relevant Function + Variables.

const [studentID, setStudentID] = useState([])
const [ checked, setChecked ] = useState(false)

const setStudent = (estudiante, check, index) => {
  setChecked(prevState => !prevState);
  var checkBox = document.getElementById('checkBox');
     
  if(checkBox.ariaChecked === true){
         let data = studentID;
         data.push(estudiante);
         setStudentID(data);
         console.log("Hi I'm True")
         console.log(estudiante, check, index)
      }  
       else if (checkBox.ariaChecked === false){
        console.log("Hi I'm False")
           console.log(estudiante, check, index)
        }  
}

//Map
<tbody>
   {estudiantes.map((estudiante, index) => (
      <tr>
      
      <td>
      <Checkbox
      checked={checked}
      color = "primary"
      id = "checkBox"
      onChange = {() => setStudent(estudiante.uid, checked, index)}
      inputProps={{ 'aria-label': 'controlled' }}
      />
      </td>

      <td>{estudiante.name}</td>
      <td>{estudiante.school}</td>
      <td>{estudiante.grade}</td>

      <td>
      <Button 
       startIcon = {<DeleteIcon />}
       size = "medium"
       variant = "contained"
       color = "secondary"
       onClick = { ()=>{deleteProduct(estudiante.uid)}}>
       Borrar
       </Button>
       </td>

       </tr>
   ))}
</tbody>

Answer 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([])

const setStudent = (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 id
    console.log("Hi I'm False")
       console.log(estudiante, check, index)
    }  
}

//Map
<tbody>
  {estudiantes.map((estudiante, index) => (
  <tr>
  
  <td>
  <Checkbox
  checked={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>
  <Button 
   startIcon = {<DeleteIcon />}
   size = "medium"
   variant = "contained"
   color = "secondary"
   onClick = { ()=>{deleteProduct(estudiante.uid)}}>
   Borrar
   </Button>
   </td>

   </tr>
   ))}
 </tbody>

Answer 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/