webbddev / menu-items-with-filter

React project with filtered items functionality

Menu Items with filter project

Filtered menu items page

General Information

Purpose of the project is to train myself on:

• using useState,
• Iterating through the items data and filtering the rendered data based on item category

Technologies Used

• React.Js

Code Elements

• Filtering and rendering items based on their categories:

const filterItems = (category) => {
  if (category === 'all') {
    setMenuItems(items);
    return;
  }
  const newItems = items.filter((item) => item.category === category);
  setMenuItems(newItems);
};

Installation and project setup

After you clone this repo to your desktop, go to its root directory and run npm install to install its dependencies.

Once the dependencies are installed, you can run npm start to start the application. You will then be able to access it at localhost:3000

Acknowledgements

Credits to an awesome instructor John Smilga!