Now that the category menu is complete, continue by implementing the product listing, as depicted in this diagram, by following the next steps:

Follow the following steps:

1. Create the following folders:
   • /src/components/market/ProductCard
   • /src/components/market/ProductList
2. Implement the ProductCard component's behavior by creating this file and adding the following JavaScript code:

/src/components/market/ProductCard/ProductCard.js

                import React from 'react';
                import './ProductCard.css';
 
                function primaryImageSrc(product) {
                  return product && product.media && 
                  product.media.length > 0
                    ? product.media[0].url
                    : null;
                }
 
                const ProductCard = ({product}) => (
                  <div className="item-card">
                    <div className="item-card-content-container">
                        <img
                          className="item-card-content-container-
                           img"
                          alt="product"
                          src={primaryImageSrc(product)}
                        />
                        <span className="item-card-content-
                          container-
                        title">
                          {product.title}
                        </span>
                        <span className="item-card-content-
                           container-
                        text">
                          {product.description}
                        </span>
                    </div>
                  </div>
                );
 
                export default ProductCard;

3. Implement ProductCard component styles by creating this file and adding the following CSS styles:

/src/components/market/ProductCard/ProductCard.css

                .item-card {
                  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
                  transition: 0.3s;
                  background-color: white;
                  width: 280px;
                  height: 200px;
                  float: left;
                  margin: 10;
                }

                .item-card:hover {
                      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
                }
 
                .item-card-content-container {
                  padding: 2px 16px;
                  display: flex;
                  height: 100%;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  cursor: pointer;
                }
 
                .item-card-content-container-img {
                  display: block;
                  max-width: 80px;
                  max-height: 80px;
                  width: auto;
                  height: auto;
                  text-align: center;
                }
 
                .item-card-content-container-title {
                  display: block;
                  font-size: 1.6rem;
                }
 
                .item-card-content-container-text {
                  word-wrap: normal;
                  font-size: 1.2rem;
                  overflow: hidden;
                }

4. Re-export the ProductCard component by writing the following in /src/components/market/index.js:

                import CategoryMenu from './CategoryMenu/CategoryMenu';
                import CategoryMenuItem from 
                './CategoryMenuItem/CategoryMenuItem';
                import ProductCard from './ProductCard/ProductCard';
                import ProductsPage from './ProductsPage/ProductsPage';
 
                export {
                  CategoryMenu,
                  CategoryMenuItem,
                  ProductCard,
                  ProductsPage,
                };

5. Implement the ProductList component's behavior by creating this file and adding the following JavaScript code:

/src/components/market/ProductList/ProductList.js

                import React from 'react';
                import './ProductList.css';
                import {ProductCard} from '../';
 
                const ProductList = ({products}) => (
                  <div>
                    <ul id="products-container">
                      {products.map(p => (
                        <li key={p.productId}>
                          <ProductCard product={p} />
                        </li>
                      ))}
                    </ul>
                  </div>
                );
 
                export default ProductList;

6. Implement ProductList component styles by creating this file and adding the following CSS styles:

/src/components/market/ProductList/ProductList.css

                #products-container, #products-container > li {
                  list-style: none;
                  padding: 0;
                  margin: 0;
                  display: inline;
                }
 
                #products-container {
                  display: flex;
                  justify-content: space-around;
                  flex-wrap: wrap;
                }

7. Re-export the ProductList component, and then write the following in /src/components/market/index.js:

                import CategoryMenu from './CategoryMenu/CategoryMenu';
                import CategoryMenuItem from  
                './CategoryMenuItem/CategoryMenuItem';
                import ProductCard from './ProductCard/ProductCard';
                import ProductList from './ProductList/ProductList';
                import ProductsPage from './ProductsPage/ProductsPage';
 
                export {
                  CategoryMenu,
                  CategoryMenuItem,
                  ProductCard,
                  ProductList,
                  ProductsPage,
                };

8. Modify the ProductsPage component:
   1. Add an empty products array as the default starting state
   2. Load products when the selected category is changed
   3. Render the ProductList component:

                import React from 'react';
                import MarketService from 
                '../../../services/marketService';
                import {CategoryMenu, ProductList} from '../';
 
                class ProductsPage extends React.Component {
                  state = {
                    categories: [],
                    products: [],
                  };
 
                  componentDidMount() {
                    MarketService.loadCategories()
                      .then(o => this.setState({categories: o}));
                  }
 
                  onCategoryChanged = (category) => {
                    MarketService.loadProducts(category.name)
                      .then(o => this.setState({products: o}));
                  }
 
                  render() {
                    return (
                      <div>
                        <CategoryMenu
                          categories={this.state.categories}
                          onCategoryChanged={this.onCategoryChanged}
                        />
                        <ProductList products={this.state.products} />
                      </div>
                    );
                  }
                }
 
                export default ProductsPage;

That's it! You have just completed implementing the product listing. Go ahead and run the app and see it in action; it should look similar to this: