samedi 16 février 2019

check all checkbox in react table

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:

  1. Stackoverflow
  2. Second stackoverflow link



Aucun commentaire:

Enregistrer un commentaire