Create an array of selected rows using checkboxes in React JS

Question

I have a table of data. The first column is a Checkbox. I'm trying to create an array of each row id that gets selected.

  const [selectedRows, setSelectedRows] = useState([]);

  const handleCheckbox = (event, row) => {
    if (event.target.checked === true) {
      selectedRows.push(row.id);
    } else {
      selectedRows.pop(row.id);
    }
  };

        <TableBody>
            {expenseTransactions.map((row) => (
              <TableRow key={row.id}>
                <TableCell>
                  <Checkbox onChange={(event) => handleCheckbox(event, row)} />
                </TableCell>
              </TableRow>
       </TableBody>

I can't get it to work properly. Any ideas on the best way to handle the onChange event so I have an array of all selected elements, and then if i unselect one, that id would get removed from the array.

Thanks a tonne,

bcjohn · Accepted Answer · 2021-01-20 05:55:59Z

1

You should not change the state directly by using selectedRows.push(). The right way is using setSelectedRows. The proper code will look like this.

const handleCheckbox = (event, row) => {
  if (event.target.checked === true) {
    setSelectedRows([
       ...selectedRows,
       row
    ])
  } else {
    const nextSelectedRows = selectedRows.filter(selectedRow => selectedRow.id != row.id);
    setSelectedRows(nextSelectedRows)
  }
}

answered Jan 20, 2021 at 5:55

bcjohn

2,54315 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Irvin Sandoval · Accepted Answer · 2021-01-20 06:03:19Z

When I deal with that scenario I prefer to store the checked elements into an object, using that approach you avoid finding the index affected. Moreover, the Material UI's Checkbox has to be set with its checked prop.

e.g:

 const [selectedRows, setSelectedRows] = useState({});

the handler:

 const handleCheckbox = (event, row) => {
      setSelectedRows((state) => 
         ({ 
           ...state, 
           selectedRows: { 
             ...state.selectedRows, 
             [row.id]: event.target.checked
           } 
         })
       );
 };

the JSX:

 <TableBody>
        {expenseTransactions.map((row) => (
          <TableRow key={row.id}>
            <TableCell>
              <Checkbox 
                checked={ selectedRows[row.id] || false } 
                onChange={(event) => handleCheckbox(event, row)} 
              />
            </TableCell>
          </TableRow>
   </TableBody>

Rajiv · Accepted Answer · 2021-01-21 05:53:03Z

0

to maintain the checked state in a state, store the checked items' names in the array.

  const [checkedState, setChekcedState] = useState([]);
  
  const handleChange = (e) =>{
    const {checked, name} = e.target
    if(checked){
      setChekcedState(oldState => ([...oldState, name]))
    }else{
      setChekcedState(oldState => oldState.filter(item => item !== name))
    }
  }

as per the comment, ids are the numbers. So, convert the number into a string.
And when the array is required, convert those strings back to the number.

<TableBody>
    {expenseTransactions.map((item) => (
        <TableRow key={item.id}>
            <Checkbox
                onChange={handleChange}
                checked={checkedState.includes(item.id)}
                name={item.id}
            />
        </TableRow>
    ))}
</TableBody>

Converting those string back into numbers

let convertedIntegerArr = checkedState.map(item=>parseInt(item))

Here is the working demo

edited Jan 21, 2021 at 5:53

answered Jan 20, 2021 at 6:10

Rajiv

3,8522 gold badges19 silver badges33 bronze badges

2 Comments

Adam27x Over a year ago

Thanks for this. One thing, my ids are numbers which is causing this not to work. How would you solve for that? Cheers

Rajiv Over a year ago

hi! for this one simple and straightforward solution is to convert that number into a string. I'm updating my answer accordingly

Collectives™ on Stack Overflow

Create an array of selected rows using checkboxes in React JS

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related