React table with JSON I'm pretty new to React and I was working on some JSON data. Now I just to understand basic concepts, so I wrote this little component, but in my eyes it's not efficient.

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

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

    checkboxHandler() {}

    componentDidMount() {
      this.setState((prevState) =&gt; {
        return {
          json: getJson(),
        }
      })
    }

    checkAll = () =&gt; {
        this.setState({
            checked: !this.state.checked
        })

        this.setState(prevState =&gt; {
          const json = prevState.json.map(obj =&gt; ({
            ...obj,
            items: obj.items.map(item =&gt; ({
              ...item,
              value: this.state.checked,
            }))
          }));
          return { json };
        });
      };

    render() {
      return (
        &lt;div&gt;
          &lt;table&gt;
            &lt;tbody&gt;
              {this.state.json.map((obj, i) =&gt; {
                return (
                  &lt;tr key={obj.id}&gt;
                    {obj.items.map((data, i) =&gt; {
                        return( 
                            &lt;td key={data.id}&gt; 
                                &lt;p&gt;{data.label}&lt;/p&gt;
                                    &lt;input 
                                        type="checkbox" 
                                        checked={data.value}
                                        onChange={this.checkboxHandler}
                                    /&gt;
                            &lt;/td&gt;
                        )
                    })}
                  &lt;/tr&gt;
                )
              })}
            &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;button onClick={this.checkAll}&gt;check\uncheck&lt;/button&gt;
          &lt;AddRow actualJson={this.state.json}/&gt;
        &lt;/div&gt;
      )
    }
  }

  export default TableComponent;


I'm not proud of it because I feel that I'm not respecting the heart of React - use module and components. Is there a way to have cleaner code?
There isn't much code to break this down to smaller components but based on the post : 

this.setState() passing an Object or a callback function :

If you want to update the state with a value that's not dependent on the previous one you can do :

this.setState({ key : newValue });


If you have to update the state based on the previous one, 

this.setState(prevState =&gt; ({key: prevState.key + value }));


see state updates may be asynchronous for more details.

the reason why i mention this is because in componentDidMount() you're passing a callback function to setState when you don't need the the prevState.

componentDidMount() {
  this.setState({ json: getJson() })
}


In checkAll() you can do one setState() instead of two: 

checkAll = () =&gt; {
   this.setState(prevState =&gt; ({
     checked: !prevState.checked,
     json: prevState.json.map(obj =&gt; ({
       ...obj,
       items: obj.items.map(item =&gt; ({
         ...item,
         value: prevState.checked,
       }))
     }))
   }));
};


Use implicit return  in the render method :

the render method can use implict returns inthe .map() and you don't really need the i, it can be refactored to :

render() {
  return (
    &lt;div&gt;
      &lt;table&gt;
        &lt;tbody&gt;
          {this.state.json.map(obj =&gt; (
            &lt;tr key={obj.id}&gt;
              {obj.items.map(data =&gt; ( 
                &lt;td key={data.id}&gt; 
                  &lt;p&gt;{data.label}&lt;/p&gt;
                    &lt;input 
                      type="checkbox" 
                      checked={data.value}
                      onChange={this.checkboxHandler}
                    /&gt;
                &lt;/td&gt;)
              )}
            &lt;/tr&gt;)
          )}
        &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;button onClick={this.checkAll}&gt;check\uncheck&lt;/button&gt;
      &lt;AddRow actualJson={this.state.json}/&gt;
    &lt;/div&gt;
  )
}