отметьте все флажки в таблице реагирования

Question

Здравствуйте, ребята, я новичок, чтобы отреагировать, и я пытался понять, как я могу добавить "переключить все" в этом маленьком приложении.

Основная задача

учитывая значение JSON, я должен отобразить это значение в флажке таблицы.После того, как я хочу реализовать функцию «проверить все», это помогает мне проверить все флажки.

Проблема

Я незнаю, как переопределить данное значение json

код

import React from 'react';
import {getJson} from './getJson';

class TableComponent extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        checked: false,
        rows:[],
        json: []
      }
    }

    componentDidMount() {
      this.setState((prevState) => {
        return {
          json: getJson(),
        }
      })
    }

    checkboxHandler() {

      }

    render() {
      return (
        <div>
          <table>
            <tbody>
              {this.state.json.map((obj, i) => {
                return (
                  <tr key={obj.id}>
                    {obj.items.map((data, i) => {
                        return( 
                            <td key={data.id}> 
                                <p>{data.label}</p>
                                    <input 
                                        type="checkbox" 
                                        checked={data.value}
                                        onChange={this.checkboxHandler} 
                                    />
                            </td>
                        )
                    })}
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>
      )
    }
  }

  export default TableComponent;

я уже видел эти сообщения:

1. Переполнение стека
2. Вторая ссылка переполнения стека

Json Info

[{
            "id": "123",
            "items": [
              { "id": "231", label: "first", value: false },
              { "id": "4321", label: "second", value: true },
            ]
              }
          ];

Answer 1

Вы можете map все свои объекты в массиве json и все элементы в их массиве items и создавать копии массивов и объектов, для которых value имеет значение true.

Пример

function getJson() {
  return [
    {
      id: "123",
      items: [
        { id: "231", label: "first", value: false },
        { id: "4321", label: "second", value: true },
        { id: "1337", label: "third", value: false }
      ]
    }
  ];
}

class TableComponent extends React.Component {
  state = {
    checked: false,
    rows: [],
    json: getJson()
  };

  checkboxHandler() {}

  checkAll = () => {
    this.setState(prevState => {
      const json = prevState.json.map(obj => ({
        ...obj,
        items: obj.items.map(item => ({
          ...item,
          value: true
        }))
      }));

      return { json };
    });
  };

  render() {
    return (
      <div>
        <table>
          <tbody>
            {this.state.json.map((obj, i) => {
              return (
                <tr key={obj.id}>
                  {obj.items.map((data, j) => {
                    return (
                      <td key={data.id}>
                        <p>{data.label}</p>
                        <input
                          type="checkbox"
                          checked={data.value}
                          onChange={this.checkboxHandler}
                        />
                      </td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
        <button onClick={this.checkAll}>Check all</button>
      </div>
    );
  }
}

ReactDOM.render(<TableComponent />, 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>