CategoryMenu

Having learned about state and props, implement the categories menu, as depicted in this diagram, by following the next steps:

Follow these steps:

Create the following folders:
- /src/components/market
- /src/components/market/CategoryMenuItem
- /src/components/market/CategoryMenu
- /src/components/market/ProductsPage
Implement CategoryMenuItem component styles by creating this file and adding the following CSS styles:

/src/components/market/CategoryMenuItem/CategoryMenuItem.css

                .menu-item-container {
                  display: inline;
                  padding: 5px 3px 5px 3px;
                  border: 1px solid black;
                  padding: 2px 5px 2px 5px;
                  cursor: pointer;
                }
 
                .menu-item-container:hover {
                  background-color: lightgray;
                }
 
                .menu-item-selected { 
                  background-color: bisque;
                }

Implement CategoryMenuItem component behavior by creating this file and adding the following JavaScript code:

/src/components/market/CategoryMenuItem/CategoryMenuItem.js                

                import React from 'react';
                import './CategoryMenuItem.css';
 
                function getItemClassNames(checked) {
                  return 'menu-item-container' + (checked ? ' 
                    menu-
                  item-selected' : '');
                }
 
                const CategoryMenuItem = (props) => (
                  <div
                    onClick={() =>    
                    props.onSelected(props.categoryName)}
                    className={getItemClassNames(props.checked)}
                  >
                    <span>{props.categoryName}</span>
                  </div>
                );
 
                export default CategoryMenuItem;

If you need to manage conditional class names according to state, you can use a simple and popular library called classnames for that purpose: https://github.com/JedWatson/classnames

Re-export the CategoryMenuItem component:
1. Create the /src/components/market/index.js file and write the following:

                import CategoryMenuItem from 
                './CategoryMenuItem/CategoryMenuItem';

                export {
                  CategoryMenuItem,
                };

Implement CategoryMenu component styles by creating this file and adding the following CSS styles:

/src/components/market/CategoryMenu/CategoryMenu.css

                #cat-menu, #cat-menu > li {
                  list-style: none;
                  padding: 0;
                  margin: 0;
                  display: inline;
                }

Implement CategoryMenu component behavior by creating this file and adding the following JavaScript code:

/src/components/market/CategoryMenu/CategoryMenu.js

                import React from 'react';
                import './CategoryMenu.css';
                import {CategoryMenuItem} from '../';
         
                class CategoryMenu extends React.Component {
                  state = {
                    selectedCategoryName: null,
                  };
 
                  onCategorySelected = (categoryName) => {
                    const cat = this.props.categories.find(c => 
                      c.name 
                    === categoryName);    
                    this.props.onCategoryChanged(cat);
                    this.setState({selectedCategoryName:  
                     cat.name});
                  };
 
                  render() {
                    return (
                      <ul id="cat-menu">
                        {this.props.categories.map(c => (
                          <li key={c.name}>
                            <CategoryMenuItem
                              categoryName={c.name}
                              checked={c.name === 
                              this.state.selectedCategoryName}
                              onSelected= 
                              {this.onCategorySelected}
                            />
                          </li>
                        ))}
                      </ul>
                    );
                  }    
                } 
     
                export default CategoryMenu;

In the preceding code, the component renders the child menu items using the map operator. This is related to list rendering, and is described in more detail after the category menu features implementation steps.

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

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

Implement a service for retrieving categories and products:
1. Create a /src/services/marketService.js file.
2. Write the following code:

            const baseUrl = 'http://localhost:55564/api/';
 
            function loadCategories() {
              return fetch(`${baseUrl}products/categories`)
                .then(r => r.json());
            }
 
            function loadProducts(categoryName) {
              return 
              
         fetch(`${baseUrl}products/searchcategory/${categoryName}`)
            .then(r => r.json());
            }
 
            export default {
              loadCategories,
            };

Implement the ProductsPage component:
1. Create a file called /src/components/market/ProductsPage/ProductsPage.js
2. Write the following code:

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

In the preceding code snippet, the service is used in a function called componentDidMount.
React components have a certain life cycle, which you can hook into. One of these hooks is componentDidMount, which is executed after a component is mounted to the DOM, making it a useful place to load related data asynchronously.

You can read more about lifecycle hooks here:
https://reactjs.org/docs/react-component.html
https://reactjs.org/docs/state-and-lifecycle.html

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

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

Modify the App component's behavior:
1. Make it a functional component.
2. Import and render the ProductsPage component:

                import React from 'react';
                import {Header} from './components/common';
                import {ProductsPage} from './components/market';
                import './App.css';
 
                const App = () => (
                  <div>
                    <Header />
                    <div className="main-area">
                      <ProductsPage />
                    </div>
                  </div>
                );
 
                export default App;

Modify App component styles, replacing the entire content of its CSS file with the styles given in the following code snippet:

                .main-area {
                  margin: 10px;
                }

Great! You can now run the app and see the category menu working and the selection tracking in place. It should look similar to this:

Table of Contents for CategoryMenu

Create new playlist

Sign In

Sign Up

Table of Contents for
CategoryMenu