Way to determine checkbox checked in react (useState)

This is my first time to develop a react application. I tried to implement checkboxes in each row of a table and check which of the rows are selected.

I used useState hook to make checked and onChange events, but seems the values are not refreshing when I check then uncheck the checkbox.

I would like to ask how to add a logic to remove the unticked values on the hooks.

T1
Checkbox A- Checked
Checkbox B- Checked
CheckedMap- A,B

T2
Checkbox B- Unchecked
CheckedMap- A,B // Unticked Checkbox B is also stored in CheckedMap

Thank you for your help.

export default function({ infinite }) {
  const [checkedMap, setCheckedMap] = useState(new Map());
}

const handleCheckedChange = transaction_seq => {
    let modifiedMap = checkedMap;
    modifiedMap.set(transaction_seq, !checkedMap.get(transaction_seq));
    setCheckedMap(modifiedMap);
  };

const columns = [
    {
      Header: "Transaction(s)",
      className: "left",
      columns: [
        {
          id: "checkbox",
          accessor: "checkbox",
          Cell: ({ row }) => {
            return (
              <input
                type="checkbox"
                className="checkbox"
                checked={checkedMap.get(row.original.transaction_seq)}
                onChange={() =>
                  handleCheckedChange(row.original.transaction_seq)
                }

6 thoughts on “Way to determine checkbox checked in react (useState)”

  1. You can check the check status in map and then decide whether to set the value or delete it

    const handleCheckedChange = transaction_seq => {
        let modifiedMap = checkedMap;
        if(checkedMap.get(transaction_seq)) {
            modifiedMap.delete(transaction_seq)
        } else {
            modifiedMap.set(transaction_seq, true);
        }
        setCheckedMap(modifiedMap);
      };
    
    Reply
  2. This is the way how to use controlled checkbox with react useState hook.

    const { useState } = React; // --> for inline use
    // import React, { useState } from 'react';  // --> for real project
    
    
    const App = () => {
      const [checked, setChecked] = useState(false)
      const handleClick = () => setChecked(!checked)
      
      return <input onClick={handleClick} checked={checked} type="checkbox" />
    };
    
    
    ReactDOM.render(<App />, document.getElementById('root'))
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
    <div id="root"></div>
    Reply

Leave a Comment