check all checkbox in react table

Question

Hello guys I'm new to react and I was tryin to udnerstand how could I add a " toggle all " in this little app.

Main task

given a json value i've to display this value in the checkbox of the table. After i want to implement a " check all " function, that helps me to check all the checkboxs.

Problem

I don't know how to override the given json value

Code

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;

i already saw these posts:

Json Info

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

Tholle · Accepted Answer · 2019-02-16 21:22:12Z

1

You could map all your objects in your json array and all the items in their items array and create copies of the arrays and objects where the value is set to true.

Example

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>

answered Feb 16, 2019 at 21:22

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Legeo Over a year ago

Sorry if i ask another question ,but i'm not sure if it's worth open another topic. But if i want to check\uncheck ?

Tholle Over a year ago

@Legeo You could e.g. use your checked property in state and use that to set all the values to true/false and toggle the checked value as well in checkAll. Or you could first check if any value is false, and then set them all to true, else to false. You can open a new question if you can't figure it out.

Legeo Over a year ago

I prefer to spend some times to get it before speak again. Really thank you for everything!

Collectives™ on Stack Overflow

check all checkbox in react table

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related