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: '',
},
};
}
ponentDidMount() {
axios.get(``, {
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;
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: '',
},
};
}
ponentDidMount() {
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;
-
what does it log when you
console.log(response)? – bennygenel Commented Aug 30, 2017 at 10:46 - >app.js:139699 Uncaught Error: Module build failed: SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (100:8) >/src/ponents/dashboard/tableSupport/tableExp.js Module build failed: SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (100:8) – SeaWarrior404 Commented Aug 30, 2017 at 10:47
-
@SeaWarrior404,
console.log(response), and notconsole.log(tableData);– 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/ponents/dashboard/tableSupport/tableExp.js Module build failed: SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (100:8) – 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 Commented Aug 30, 2017 at 10:56
1 Answer
Reset to default 10<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale-1">
<script src="http://www.jimsproch./react/future/react.js"></script>
<script src="http://www.jimsproch./react/future/react-dom.js"></script>
<script src="http://www.jimsproch./react/babel-browser.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-table/6.5.3/react-table.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare./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: '',
}],
};
}
ponentDidMount () {
axios.get('http://private-9ff5e-stackoverflow.apiary-mock./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)