Day 155 of Learning MERN Stack

Hello Dev Community! 👋

It is officially Day 155 of my software engineering track! Today, I brought the interactive catalog of Tomato — The Food Delivery App to life by designing a dynamic, state-driven Explore Menu component (ExploreMenu.jsx)! 🥗🍩🍕

Providing users with responsive visual feedback as they browse menus is critical for high-conversion web designs. Here is how I set up the filtering architecture.

🛠️ Inside the Day 155 Category Filter System

As captured in my code editor and browser views in “Screenshot (369).jpg” and “Screenshot (370).png”, the setup relies on a reliable structural flow:

1. Unified State Uplifting (Prop Passing)

• Instead of keeping selection state locked inside the child component, I passed the states down:

javascript
  function ExploreMenu({ category, setCategory }) {  onClick={() => setCategory(prev => prev === item.menu_name ? "All" : item.menu_name)}

Enter fullscreen mode Exit fullscreen mode