React js select all checkboxes not in react table

Question

In what way I can check/uncheck all checkboxes if in the set of data there is any boolean field and I'm not using react-table? For single checkbox is working but not for all. Thank you for any tip. I named checkboxes as corresponding name of the data in the table but it is not working.

This is my class:

class Boxes extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            datas: [
                {name: "name1", status: 1},
                {name: "name3", status: 0},
                {name: "name2", status: 2},
            ],
            checkboxes: [],
            selectAll: true,
        };
        this.toggleAllChange = this.toggleAllChange.bind(this);
        this.toggleOneChange = this.toggleOneChange.bind(this);
    }

  toggleAllChange(event) {
    let checked = event.target.checked;
    console.log(checked);

    this.setState({
      checkAll: checked,
      checkboxes: document.getElementsByClassName("chbx")
    });

    for (let i in this.state.checkboxes){
      let nameAct = this.state.checkboxes.item(i).name;
      let checkbox = document.getElementsByName(nameAct);
      this.setState({
         [nameAct]: checked
      });
    }
  }

toggleOneChange(event) {
    const target = event.target;
    const value = target.checked;
    const name = target.name;

    this.setState({
      [name]: value
    });
}

And my Table in render method:

<div className="input-group mb-3">
    <InputGroup className="mb-3">
        <input
            type="checkbox"
            value="checkAll"
            defaultChecked={this.state.selectAll}
            onChange={this.toggleAllChange.bind(this)}/>
        Check/Uncheck All
    </InputGroup>
</div>
<Table responsive>
    <thead className="text-primary">
    <tr>
        <th>Data name</th>
        <th>Data status</th>
        <th>Check</th>
    </tr>
    </thead>
    <tbody>
    {this.state.datas.map(data => (
        <tr>
            <td>{data.name}</td>
            <td>{data.status}</td>
            <td>
                <input
                    className="chbx"
                    type="checkbox"
                    id={"chbx" + data.name}
                    name={"chbx" + data.name}
                    defaultChecked={this.state.selectAll}
                    onChange={this.toggleOneChange.bind(this)}
                />
            </td>
        </tr>
    ))}
    </tbody>
</Table>

Answer 1

Look at the following example, I've:

• Used an object checkBoxObj to manage the state of checkboxes
• Used the checked attribute instead of defaultChecked and checkBoxObj:

<input
  className="chbx"
  type="checkbox"
  id={"chbx" + data.name}
  name={"chbx" + data.name}
  checked={this.state.checkBoxObj["chbx" + data.name]}
  onChange={this.toggleOneChange.bind(this)}
/>

• Change toggleAllChange and toggleOneChange methods

Live example:

const datas = [
    {name: "name1", status: 1},
    {name: "name3", status: 3},
    {name: "name2", status: 2},
];
const selectAll = true;
const checkBoxObj = datas.reduce((acc, d) => (acc["chbx" + d.name] = selectAll, acc), {});

class Boxes extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          datas,
          //allChecked: true,
          selectAll,
          checkBoxObj,
      };
      this.toggleAllChange = this.toggleAllChange.bind(this);
      this.toggleOneChange = this.toggleOneChange.bind(this);
  }

  toggleAllChange(event) {
      const selectAll = event.target.checked;
      
      const newCheckBoxObj = {};
      for(let k in this.state.checkBoxObj) {
        newCheckBoxObj[k] = selectAll;
      }

      this.setState({
          checkBoxObj: newCheckBoxObj,
          selectAll
      });
  }

  toggleOneChange(event) {
      const target = event.target;
      const value = target.checked;
      const name = target.name;
      
      const newCheckBoxObj = { ...this.state.checkBoxObj, [name]: value };
      
      const selectAll = Object.values(newCheckBoxObj).every(chk => chk);
      
  
      this.setState({
        checkBoxObj: newCheckBoxObj,
        selectAll
      });
  }
  
  render() {
    const filteredDatas = this.state.datas;
    return (
      <div>
        <div className="input-group mb-3">
                <input
                    type="checkbox"
                    value="checkAll"
                    style={{ marginRight: 5 }}
                    checked={this.state.selectAll}
                    onChange={this.toggleAllChange.bind(this)}
                />{" "}
                Check/Uncheck All
        </div>
        <table responsive>
            <thead className="text-primary">
            <tr>
                <th>Data name</th>
                <th>Data status</th>
                <th>Check</th>
            </tr>
            </thead>
            <tbody>
            {filteredDatas.map(data => (
                <tr>
                    <td>{data.name}</td>
                    <td>{data.status}</td>
                    <td>
                        <input
                            className="chbx"
                            type="checkbox"
                            id={"chbx" + data.name}
                            name={"chbx" + data.name}
                            checked={this.state.checkBoxObj["chbx" + data.name]}
                            onChange={this.toggleOneChange.bind(this)}
                        />
                    </td>
                </tr>
            ))}
            </tbody>
        </table>
      </div>)
  }

}

ReactDOM.render(<Boxes />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>