[Solved] Selection Checkbox in React using Hooks

Joseph Asks: Selection Checkbox in React using Hooks
I have a problem selecting a single checkbox or multiple checkbox in a table in React. I’m using Material-UI. Please see my codesandbox here

CLICK HERE

I wanted to achieve something like this in the picture below:


enter image description here

Code:
  <TableContainer className={classes.tableContainer}>
    <Table>
      <TableHead className={classes.tableHead}>
        <TableRow>
          <TableCell padding="checkbox">
            <Checkbox
              checked={false}
              inputProps={{ "aria-label": "select all desserts" }}
            />
          </TableCell>
          {head.map((el) => (
            <TableCell key={el} align="left">
              {el}
            </TableCell>
          ))}
        </TableRow>
      </TableHead>
      <TableBody>
        {body?.excluded_persons?.map((row, index) => (
          <TableRow key={row.id}>
            <TableCell padding="checkbox">
              <Checkbox checked={true} />
            </TableCell>
            <TableCell align="left">{row.id}</TableCell>
            <TableCell align="left">{row.name}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>

Ten-tools.com may not be responsible for the answers or solutions given to any question asked by the users. All Answers or responses are user generated answers and we do not have proof of its validity or correctness. Please vote for the answer that helped you in order to help others find out which is the most helpful answer. Questions labeled as solved may be solved or may not be solved depending on the type of question and the date posted for some posts may be scheduled to be deleted periodically. Do not hesitate to share your response here to help other visitors like you. Thank you, Ten-tools.