Fetch data using an API

Resolved

Kindly let me know where I have gone wrong. The below code is fetching the data, but it is not displaying the data in the table. Here is my code:
import React from ‘react’;
import * as WebDataRocksReact from ‘./webdatarocks.react’;
export class App extends React.PureComponent {
state = {
products: []
}
componentDidMount = () => {
this.getProducts()
}
getProducts = _=>{
fetch(‘/api/products’)
.then(res => res.json())
.then(products => this.setState({products:products}, () => console.log(‘Products fetched …’, products)));
}
render() {
const {products} = this.state;
return (
<div>
<WebDataRocksReact.Pivot toolbar={true}
report= {{dataSource: {data: products }}} />
</div>
);
}
}
export default App;

1 answer

WebDataRocks Team WebDataRocks April 22, 2019

Hello!
Thank you for writing to us.

It seems that the “products” in this.state are empty when render() is performed. This is the reason why the grid appears empty.
Please make sure that the data is already loaded or refer WebDataRocks directly to the remote resource.

Best Regards,
WebDataRocks Team

Please login or Register to Submit Answer