How to add checkbox to table -React

I want to add a checkbox to each row in the table I have already created. In addition, there should be a select all button and it should be able to select all rows.. I have tried this but all select part didn't work.

import React, { useState, useEffect } from 'react'; const UserTable = props => { const [users , setUsers] = useState([]) ; const userData = [props.users] ; useEffect(() => { setUsers(userData) },[]) ; const handleChange = (e) => { const {name , checked} = e.target ; if(name === "allSelect") { let tempUser = users.map(user => { return {...user,isChecked: checked} }) ; setUsers(tempUser) ; } else { let tempUser = users.map(user => user.name === name ? {...user, isChecked: checked} : users); setUsers(tempUser) ; } } return ( <table className="table table-dark"> <thead> <tr> <th scope="col"> <input type="checkbox" className="form-check-input" name = "allSelect" onChange = {handleChange} />Select All </th> <th scope="col">Hostname</th> <th scope="col">Username</th> <th scope="col">Stop</th> <th scope="col">Sleep</th> <th scope="col">Start</th> <th scope="col">Status</th> <th scope="col">CPU Temperature(°C)</th> <th scope="col">GPU Info</th> <th scope="col">Edit/Delete</th> </tr> </thead> <tbody> { props.users.length > 0 ? ( props.users.map(user => ( <tr key={user.id}> <th scope="row"> <input type="checkbox" className="form-check-input" checked = {user?.isChecked || false} onChange = {handleChange} /> </th> <td>{user.name}</td> <td>{user.username}</td> <td><button onClick={() => props.editStopPC(user)} className="btn btn-danger">Stop</button></td> <td><button onClick={() => props.editSleepPC(user)} className="btn btn-warning">Sleep</button></td> <td><button onClick={() => props.editStartPC(user)} className="btn btn-success">Start</button></td> <td>{user.status}</td> <td>{user.cpu}</td> <td>{user.info}</td> <td className="center-align"> <button className="btn btn-info" onClick={() => props.editRow(user)}> edit </button> <button className="btn btn-danger" onClick={() => props.deleteUser(user.id)}> delete </button> </td> </tr> )) ) : ( <tr> <td colSpan={9}>{props.users[0]} No Users</td> </tr> ) } </tbody> </table> ) }; export default UserTable; 

I'm getting the support for the experimental syntax 'optional chaining' isn't currently enabled error. For user?.isChecked || false expression I have tried checked = user!==null ? user.isChecked : false but it didn't work. I am glad if you help

EDIT:

const [selected , setSelected] = useState([]) ; const userData = [props.users] ; useEffect(() => { setSelected(userData) },[]) ; const handleClick = (event, name) => { const selectedIndex = selected.indexOf(name); let newSelected = []; if (selectedIndex === -1) { newSelected = newSelected.concat(selected, name); } else if (selectedIndex === 0) { newSelected = newSelected.concat(selected.slice(1)); } else if (selectedIndex === selected.length - 1) { newSelected = newSelected.concat(selected.slice(0, -1)); } else if (selectedIndex > 0) { newSelected = newSelected.concat( selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1) ); } setSelected(newSelected); }; 

<th scope="col"> <input type="checkbox" className="form-check-input" name = "allSelect" checked={isItemSelected} onChange={(event) => handleClick(event, this.name)} />Select All </th> 

if you're talking about using it this way, I get the error 'isItemSelected' is not defined no-undef.

1 Answer

<Checkbox checked={isItemSelected} onChange={(event) => handleClick(event, name)} /> 

and this is the function that i am using:

 const handleClick = (event, name) => { const selectedIndex = selected.indexOf(name); let newSelected = []; if (selectedIndex === -1) { newSelected = newSelected.concat(selected, name); } else if (selectedIndex === 0) { newSelected = newSelected.concat(selected.slice(1)); } else if (selectedIndex === selected.length - 1) { newSelected = newSelected.concat(selected.slice(0, -1)); } else if (selectedIndex > 0) { newSelected = newSelected.concat( selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1) ); } setSelected(newSelected); }; 

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobmxraW2FeYSOoaawZaSkeqKww2aaoZ2ToK%2BwxIytpmaskZe5pnnRnpicrA%3D%3D