How to make the API call and display it in React JS using React Table and Axios?

Question

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:

    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 => {
      this.setState({ tableData: response.data.tableData });
      //console.log(tableData);
});}

  render() {
  const { tableData } = this.state;

  return (
      <div>
       <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 => 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"
        />
     </div>
    );
}
   }

   export default TableExp;

>app.js:139699 Uncaught Error: Module build failed: SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (100:8) >/src/components/dashboard/tableSupport/tableExp.js Module build failed: SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (100:8) — SeaWarrior404
– SeaWarrior404, Commented Aug 30, 2017 at 10:47
@SeaWarrior404, console.log(response), and not console.log(tableData); — Andrii Starusiev
– Andrii Starusiev, Commented Aug 30, 2017 at 10:50
Yeah, I edited the console.log(tableData) and updated it with console.log(response) and here is the response app.js:139699 Uncaught Error: Module build failed: SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (100:8) >/src/components/dashboard/tableSupport/tableExp.js Module build failed: SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (100:8) — SeaWarrior404
– SeaWarrior404, Commented Aug 30, 2017 at 10:53
what is the line 100 on your tableExp.js file? The code you post does not have 100 lines. — bennygenel
– bennygenel, Commented Aug 30, 2017 at 10:56

chuve · Accepted Answer · 2017-08-30 12:37:24Z

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width-device-width, initial-scale-1">
    <script src="http://www.jimsproch.com/react/future/react.js"></script>
    <script src="http://www.jimsproch.com/react/future/react-dom.js"></script>
    <script src="http://www.jimsproch.com/react/babel-browser.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.css">
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    class TableExp extends React.Component {
        constructor () {
            super();

            this.state = {
                tableData: [{
                    resourceID: '',
                    resourceType: '',
                    tenantName: '',
                    dealerID: '',
                    status: '',
                    logFilePath: '',
                    supportPerson: '',
                    lastUpdatedTime: '',
                }],
            };
        }

        componentDidMount () {
            axios.get('http://private-9ff5e-stackoverflow.apiary-mock.com/questions', {
                responseType: 'json'
            }).then(response => {
                this.setState({ tableData: response.data });
            });
        }

        render () {
            const { tableData } = this.state;

            return (<ReactTable.default
                            data={tableData}
                            columns={[
                                {
                                    Header: 'Details',
                                    columns: [
                                        {
                                            Header: 'Tenant Name',
                                            accessor: 'tenantName',
                                        },
                                        {
                                            Header: 'Support Engineer',
                                            id: 'supportEngineer',
                                            accessor: d => d.supportPerson,
                                        },
                                    ],
                                },
                                {
                                    Header: 'Info',
                                    columns: [
                                        {
                                            Header: 'Dealer ID',
                                            accessor: 'dealerID',
                                        },
                                        {
                                            Header: 'Status',
                                            accessor: 'status',
                                        },
                                    ],
                                },
                                {
                                    Header: 'Logs',
                                    columns: [
                                        {
                                            Header: 'File Path',
                                            accessor: 'logFilePath',
                                        },
                                    ],
                                },
                            ]}
                            defaultPageSize={10}
                            className="-striped -highlight"
                    />
            );
        }
    };

    ReactDOM.render(<div><TableExp/></div>, document.getElementById("root"));
</script>
</body>
</html>

There is solution for you: link to jsbin

I have made mock api for your example, that I used. You can check it here

Few words about fixes that I made:

property "data" in ReactTable changed to an array
fixed accessors values (check documentation)

Do not pay attention on ReactTable.default (it is necessary for browser env example)

How do i display serial numbers in table. Note that serial id not in JSON. Please anyone can help me

Collectives™ on Stack Overflow

How to make the API call and display it in React JS using React Table and Axios?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related