title: How to make the API call and display it in React JS using React Table and Axios?
body: <p>Im new to React and I have to fetch data from an API and show it in a table. Im using the React Table for displaying the data in the table. How to implement the above? Currently Im not seeing any response from the server in the Google chrome dev console. The React Table implementation works using local data, however populating the table from an API is not working.
  My code is as follows:</p>
  
  <pre><code>    class TableExp extends React.Component {
       constructor() {
       super();
  
    this.state = {
        tableData: {
          resourceID: '',
          resourceType: '',
          tenantName: '',
          dealerID: '',
          status: '',
          logFilePath: '',
          supportPerson: '',
          lastUpdatedTime: '',
        },
    };
  }
  
   componentDidMount() {
      axios.get(`https://myAPI.restdb.io/rest/mock-data`, {
      headers: {'x-apikey': 'apiKEY'}
    })
  .then(response =&gt; {
        this.setState({ tableData: response.data.tableData });
        //console.log(tableData);
  });}
  
    render() {
    const { tableData } = this.state;
  
    return (
        &lt;div&gt;
         &lt;ReactTable
              data={tableData}
              columns={[
                {
                  Header: 'Details',
                  columns: [
                    {
                      Header: 'Tenant Name',
                      accessor: '{this.state.tableData.tenantName}',
                    },
                    {
                      Header: 'Support Engineer',
                      id: '{this.state.tableData.supportEngineer}',
                      accessor: d =&gt; d.supportPerson,
                    },
                  ],
                },
                {
                  Header: 'Info',
                  columns: [
                          {
                            Header: 'Dealer ID',
                            accessor:'{this.state.tableData.dealerID}',
                          },
                          {
                            Header: 'Status',
                            accessor:'{this.state.tableData.status}',
                          },
                        ],
                },
                {
                  Header: 'Logs',
                  columns: [
                          {
                            Header: 'File Path',
                            accessor:'{this.state.tableData.filePath}',
                          },
                        ],
                },
              ]}
              defaultPageSize={10}
              className="-striped -highlight"
          /&gt;
       &lt;/div&gt;
      );
  }
     }
  
     export default TableExp;
  </code></pre>