In the Shops component, we will render the list of shops in a Material-UI List, after fetching the data when the component mounts and setting the data to state:
The loadShops method is called in componentDidMount to load the shops when the component mounts.
mern-marketplace/client/shop/Shops.js:
componentDidMount = () => { this.loadShops()}
It uses the list fetch method to retrieve the shop list and sets the data to state.
mern-marketplace/client/shop/Shops.js:
loadShops = () => { list().then((data) => { if (data.error) { console.log(data.error) } else { this.setState({shops: data}) } }) }
In the Shops component, the retrieved ...
