ReactTable - react component with REST API Call

Question

Can you please suggest me how to update the data in the grid. I am updating the data on the server request. How do re-render the data table? In the render section, I have used react Table component. Can you please suggest me the actual approach to use this react table component>

          import React, { PureComponent } from 'react';
          import ReactTable from 'react-table'
          import "./Vendors.css";

          export default class VendorsList extends PureComponent {

            data = [{
              name: 'Tanner Linsley',
              age: 26,
              friend: {
                name: 'Jason Maurer',
                age: 23
              }
            }];

            columns = [{
              Header: 'Name',
              accessor: 'name' // String-based value accessors!
            }, {
              Header: 'Age',
              accessor: 'age',
              Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
            }, {
              id: 'friendName', // Required because our accessor is not a string
              Header: 'Friend Name',
              accessor: d => d.friend.name // Custom value accessors!
            }, {
              Header: props => <span>Friend Age</span>, // Custom header components!
              accessor: 'friend.age'
            }];

            constructor(props) {
              super(props);

            fetch("http://api.com/vendor/list", {
              method : 'POST'
            })
              .then(res => res.json())
              .then(
                (result) => {
                  this.data = [{
                    name: 'Tanner Linsley',
                    age: 290,
                    friend: {
                      name: 'Maurer',
                      age: 23
                    }
                  }];
                }
              )   
          }

              render() {
                return 
                  <div> 
                  <div className="gridsize"><ReactTable data={this.data} columns={this.columns} /></div>
                  </div>
            }
          }

• Raja

Answer 1

you need to use states.. and call setState when you get response from your server. calling the setState function will call render function automatically

Answer 2

When you want to update the view based on a change in data, you should store the data in state and update it using setState which will trigger a re-render and update the view. Also API request must be handled in componentDidMount lifecycle function and not constructor

export default class VendorsList extends PureComponent {

       state = {
            data = [{
              name: 'Tanner Linsley',
              age: 26,
              friend: {
                name: 'Jason Maurer',
                age: 23
              }
            }];
       }

       columns = [{
              Header: 'Name',
              accessor: 'name' // String-based value accessors!
            }, {
              Header: 'Age',
              accessor: 'age',
              Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
            }, {
              id: 'friendName', // Required because our accessor is not a string
              Header: 'Friend Name',
              accessor: d => d.friend.name // Custom value accessors!
            }, {
              Header: props => <span>Friend Age</span>, // Custom header components!
              accessor: 'friend.age'
            }];

      componentDidMount() {

         fetch("http://api.com/vendor/list", {
              method : 'POST'
         })
         .then(res => res.json())
         .then((result) => {
            this.setState({data: [{
                name: 'Tanner Linsley',
                age: 290,
                friend: {
                   name: 'Maurer',
                   age: 23
                 }
               }]
            });
         )}; 
     }
     render() {
         return (
            <div> 
               <div className="gridsize"><ReactTable data={this.state.data} columns={this.columns} /></div>
            </div>
         )
      }
}