Установите флажок «все таблицы» при нажатии кнопки «другая таблица», используя reactJs

Question

я пытаюсь выбрать все данные и выбрать одну строку из таблицы, но я много пробовал, но мне не удалось, и я хотел выбрать данные в driverlist это мое поле сообщения, в которое я хочу поместить выбранные данные в таблицу но я не могу, я использую метод записи, чтобы выбрать драйвер, и я хочу выбрать драйвер для моей таблицы, но я могу сделать это, из <th> флажок ввода, если я нажму, я должен выбрать все данные, или я также могу выбрать, указав c Строка и отмена выбора, я застрял с утра, пожалуйста, помогите мне вот мой код и вот ссылка на мой кодовый ящик, где я реализую свои данные, а также использовал driverlist. И данные должны быть выбраны по специфи https://codesandbox.io/s/reactpostmethod-1nsn8

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isHidden: true,
      checked: false,
      driverlist: [],
      todos: [],
      driver: [],
      selectAll: false,
      checkAll: false,
      data: []

      // isChecked: false
    };
    this.toggleHie = this.toggleHie.bind(this);
    this.toggleHidden = this.toggleHidden.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleSingleCheckboxChange = this.handleSingleCheckboxChange.bind(
      this
    );
  }

  handleChange = () => {
    var selectAll = !this.state.selectAll;
    this.setState({ selectAll: selectAll });
    var checkedCopy = [];
    this.state.data.forEach(function(e, index) {
      checkedCopy.push(selectAll);
    });
    this.setState({
      checked: checkedCopy
    });
    console.log(this.state.checkedCopy);
  };

  handleSingleCheckboxChange = index => {
    console.log(index);

    var checkedCopy = this.state.checked;
    checkedCopy[index] = !this.state.checked[index];
    if (checkedCopy[index] === false) {
      this.setState({ selectAll: false });
    }

    this.setState({
      checked: checkedCopy
    });
  };

  toggleHidden() {
    this.setState({
      //  this.setState({ isHidden: false });
      isHidden: true
    });
  }

  toggleHie() {
    this.setState({ isHidden: false });
  }

  // Get Data from filter date
  async componentDidMount() {
    try {
      fetch(`https://digitalfleet.eu/api/1/drivers/`, {
        method: "GET",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
          Authorization: "Bearer L2vCalXfupCj1X7Qv7xbY2Flr1oSrF"
        }
      })
        .then(todos => todos.json())
        .then(todos => {
          console.log("hello", todos);
          this.setState({
            ...this.state,
            todos
          });
        });
    } catch (e) {
      console.log(e);
    }
  }

  async onChange(event) {
    await this.setState({
      [event.target.name]: event.target.value
    });
    console.log(this.state.driver);
  }

  handleCheckAll = () => {
    this.setState(
      {
        checkAll: !this.state.checkAll
      },
      () => {
        this.state.todos.forEach(item =>
          this.setState({ [item.id]: this.state.checkAll })
        );
      }
    );
    console.log(this.state.todos);
  };

  handleChange = e => {
    this.setState(
      {
        [e.target.name]: e.target.checked
      },
      () => {
        const uncheckedItems = this.state.todos.filter(
          item => !this.state[item.id]
        );

        this.setState({
          checkAll: uncheckedItems.length === 0 ? true : false
        });
      }
    );
  };

  render() {
    const { todos } = this.state;

    return (
      <div>
        <div
          className="headerr"
          style={{ marginTop: "5px", border: "1px solid gray" }}
        >
          <h6>Score</h6>

          <div className="caaar" style={{ marginTop: "-10px" }}>
            <table id="table-to-xls" className="table table-hover">
              <thead>
                <tr className="th ">
                  <th>
                    <input
                      type="checkbox"
                      class="select-all checkbox"
                      name="driverlist"
                      value={this.state.driverlist}
                      onChange={this.handleCheckAll}
                      checked={this.state.checkAll}
                    />
                  </th>
                  <th className="  sorttable_nosort" style={{ width: "5%" }}>
                    id
                  </th>
                  <th onClick={() => this.sortBy("name")}>name</th>

                  <th onClick={() => this.sortBy("overallscore")}>Overall</th>
                  <th onClick={() => this.sortBy("overallspeedscore")}>
                    Speed
                  </th>
                  <th onClick={() => this.sortBy("overalldynamicscore")}>
                    Dynamic
                  </th>
                  <th onClick={() => this.sortBy("overallefficienyscore")}>
                    Efiicieny
                  </th>
                </tr>
              </thead>
              <tbody>
                {todos.map((c, i) => (
                  <tr key={c.id}>
                    <td>
                      <input
                        type="checkbox"
                        id="togBtn"
                        name="driverlist"
                        value={this.state.driverlist}
                        className="checkbox"
                        onChange={this.handleChange}
                      />
                    </td>
                    <td
                      style={{ color: "#b71c1c" }}
                      className="font-weight-bolder"
                    >
                      {i + 1}
                    </td>
                    <td
                      style={{ color: "#b71c1c" }}
                      className="font-weight-bolder"
                    >
                      {c.name ? `${c.name}` : " ? "}
                    </td>
                    <td>
                      {c.overallscore ? `${c.overallscore.toFixed(1)}` : " - "}
                    </td>
                    <td>
                      {c.overallspeedscore
                        ? `${c.overallspeedscore.toFixed(1)}`
                        : " - "}
                    </td>
                    <td>
                      {c.overalldynamicscore
                        ? `${c.overalldynamicscore.toFixed(1)}`
                        : " - "}
                    </td>
                    <td>
                      {c.overallefficienyscore
                        ? `${c.overallefficienyscore.toFixed(1)}`
                        : " - "}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
  }
}

export default App;