Within the componentDidMount method, we map the Shoes constant to our state variables, as shown here. We fetch the individual shoe details from the Shoes.js file that we declared earlier:

Shoes.forEach((shoe) => {
 let logo = shoe.logo;
 let price = shoe.price;
 let image = shoe.image;
 let name = shoe.name;

Each individual shoe is mapped in the shoes array and pushed to the state as shown in the following. From here, we will retrieve it within the Shoerack component:

shoes.push({
 logo,
 price,
 name,
 image,
 });
 
 app.setState({
 shoes
 
 })
 });

After each push, we set the app state to show a new product on the e-commerce website. Let's take a look at our App.js render method next.