How to select/deselect all checkbox in react js?

Question

I want to select/deselect all checkbox values in react js. I have done the code for single checkbox selection but unable to do it for all select.

code is -

data.map((item) => (
    <tr key={item._id}>
        <td>{item.fname}</td>
        <td>{item.age}</td>
        <td>
            <input
                className="item"
                type="checkbox"
                id={item._id}
                name="contactId"
                value={item._id}
                checked={
                    theArray.indexOf(item._id) !== -1
                    ? true
                    : false
            }
            onChange={handleCheckbox}
            />
        </td>
    </tr>
))

data is -

data: [
  {
    _id: '001',
    fname:'A',
    age:'20'
  },
  {
    _id: '002',
    fname:'B',
    age:'21'
  },
  {
    _id: '003',
    fname:'C',
    age:'22'
  },
  {
    _id: '004',
    fname:'D',
    age:'23'
  },
  {
    _id: '005',
    fname:'E',
    age:'24'
  }
]

Data can be big also. My code for multi select checkbox - <input type="checkbox" onClick={handleAllChecked} value="checkedall" />

code for handleAllChecked -

const handleAllChecked=(e) =>{
console.log("a");
}

I am unable to understand how to get the All checkbox checked unchecked inside a table. How to make select/deselect all checkbox? Can anyone help me out?

Answer 1

You could start with adding the state of the checkbox to the data so it looks like this:

{
    _id: '001',
    fname:'A',
    age:'20',
    checked: false,
  },

By doing this:

data.map(element => ({ ...element, checked: false }));

Then in your jsx:

data.map((item) => (
    <tr key={item._id}>
        <td>{item.fname}</td>
        <td>{item.age}</td>
        <td>
            <input
                className="item"
                type="checkbox"
                id={item._id}
                name="contactId"
                value={item._id}
                checked={item.checked}
                onChange={handleCheckbox}
            />
        </td>
    </tr>
))

You probably need to transform your data object to be the state of your component. Assuming you use hooks, your handler would then look like this:

const handleAllChecked=(e) => {
   setData(data.map(element => element.checked = !element.checked));
}

So your data object would be like this:

const [data, setData] = useState(initialData);

Answer 2

Do you want each checkbox to be checked one-by-one and also by the check all button right? 1: If not, it should be enought to introduce a flag in state to check/uncheck all checkboxes. 2: If so, you will need to handle the states of all checkboxes in component state. If you do not want to store all your data in state as guys before me described, you can still create an array only with the id (or some unique identifiers) of each selected checkboxes and in JSX check if identifier of the currently rendered checkbox is present in this array of checked checkboxes or in the array of the unchecked checkboxes.

Code for 1st option:

const [checkAll, setCheckAll] = useState(false); //false is the default, set to true if you want to be all checked by default

data.map((item) => (
    <tr key={item._id}>
        <td>{item.fname}</td>
        <td>{item.age}</td>
        <td>
            <input
                className="item"
                type="checkbox"
                id={item._id}
                name="contactId"
                value={item._id}
                checked={!checkAll ? 
                    theArray.indexOf(item._id) !== -1
                    ? true
                    : false
                    : true
            }
            onChange={handleCheckbox}
            />
        </td>
    </tr>
));