React table with JSON

Question

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) => {
        return {
          json: getJson(),
        }
      })
    }

    checkAll = () => {
        this.setState({
            checked: !this.state.checked
        })

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

    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>
          <button onClick={this.checkAll}>check\uncheck</button>
          <AddRow actualJson={this.state.json}/>
        </div>
      )
    }
  }

  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?

Answer 1

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 => ({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 = () => {
   this.setState(prevState => ({
     checked: !prevState.checked,
     json: prevState.json.map(obj => ({
       ...obj,
       items: obj.items.map(item => ({
         ...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 (
    <div>
      <table>
        <tbody>
          {this.state.json.map(obj => (
            <tr key={obj.id}>
              {obj.items.map(data => ( 
                <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\uncheck</button>
      <AddRow actualJson={this.state.json}/>
    </div>
  )
}