How to select all and unselect by specific row in table by checkbox - React Js

Question

I am trying to select all by header input checkbox and i can deselect by any specific columns.i this code everything working fine i am getting id and i can fetch data except i can not select all by selecting header input checkbox , so guide me how to resolve this issue that i can select all and deselect any specific row, here is my code.

import React, { Component } from "react";
import config from "../../Main";
import { withRouter } from "react-router";
import { Helmet } from "react-helmet";
import { withTranslation } from "react-i18next";
import Search from "./Search";
import arrow_left from "../../../img/Aarrow.png";
import "./query"

export class Choose extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedBoxCheck: false,
      stats: [],
      selectedItems: [],
    };
    this.toggleHidden = this.toggleHidden.bind(this);
    this.onChange = this.onChange.bind(this);
  }

  async onSubmitt1(e) {
   .....
  }


  async onChange(e) {
    await this.setState({
      [e.target.name]: e.target.value
    });

    this.onSubmitt1("");
  }

  componentDidMount() {
    this.onSubmitt1("");
  }



// This is function of select specific row by id.
  async onItemSelect(row) {
    await this.setState(prevState => ({
      selectedItems: [...prevState.selectedItems, row],
      checkedBoxCheck: true
    }));
    console.log("Hello", this.state.selectedItems);
  }


// This is function to select all rows id
  toggleSelectAll() {
    let selectedItems = [];
    var checkedBoxCheck = !this.state.checkedBoxCheck;
    this.setState({ checkedBoxCheck: checkedBoxCheck });
    this.state.stats.forEach(x => {
      selectedItems[x.id] = x.id

    });
    this.setState(prevState => ({
      selectedItems: [...prevState.selectedItems, selectedItems],
      checkedBoxCheck: !this.state.checkedBoxCheck
    }));

    console.log(selectedItems);
  }

  render() {
    const { stats } = this.state;
    const { t } = this.props;
    if (stats === null) return <p>Loading ....</p>;
    return (
      <div className="container1" style={{ marginTop: "30px" }}>
        <Helmet>
          <title>CHOOSE LIST</title>
        </Helmet>



        <div className="headerr" style={{ marginTop: "20px" }}>
          <div className="invoi caaar">
            <table className="table">
              <thead>
                <tr style={{ marginTop: "-88px" }}>
                  <th class="active" style={{ width: "20px" }}>
                    <input
                      type="checkbox"
                      class="select-all checkbox"
                      onChange={this.onChange}
                      name="first_name"
                      id="selectAll1"
                      onClick={this.toggleSelectAll.bind(this)}
                    />
                  </th>
                  <th className="" style={{ width: "20px" }}>
                    {t("Id")}
                  </th>
                  <th className="">{t("Brand")}</th>
                  <th className="">{t("Model")}</th>
                  <th className="" style={{ width: "90px" }}>
                    {t("production_year")}
                  </th>
                  <th className="t" style={{ width: "90px" }}>
                    {t("technical_inspection")}
                  </th>
                  <th className="t" style={{ width: "90px" }}>
                    {t("insurance_policy")}
                  </th>

                </tr>
              </thead>

              <tbody>
                {stats.map((c, i) => (
                  <tr key={c.id}>
                    <td>
                      <input
                        type="checkbox"
                        // id="togBtn"
                        // checked={this.state.checkedBoxCheck }
                        className="checkbox"
                        name="selectOptions"
                        onClick={() => this.onItemSelect(c.id)}
                      />
                    </td>
                    <td>{i + 1}</td>
                    <td>{c.type ? `${c.type}` : "-"}</td>
                    <td>{c.brand ? `${c.brand}` : "-"}</td>
                    <td>{c.model ? `${c.model}` : "-"}</td>
                    <td>{c.production_year ? `${c.production_year}` : "-"}</td>

                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
  }
}
export default withTranslation()(withRouter(Choose));

Thanks

Answer 1

Codesandbox for help : https://codesandbox.io/s/divine-http-1g883

Your only problem should be in this piece of code

toggleSelectAll() {
    // same as above

    // this block
    this.state.stats.forEach(x => {
      // selectedItems[x.id] = x.id
      selectedItems.push(x.id);
    });

    // same as below
  }

More gracefully you can replace this code with:

const selectedItems = this.state.stats.map(x => x.id);

Also in your render function change this:

    <input
     type="checkbox"
     // id="togBtn"
     checked={this.state.selectedItems.includes(c.id)}
     className="checkbox"
     name="selectOptions"
     onClick={() => this.onItemSelect(c.id)}
     />