Roadmap to Building a Restaurant Menu Page in React
A focused roadmap for building a restaurant menu page in React, from route setup to rendering the menu items.
Roadmap to Building a Restaurant Menu Page in React
A restaurant menu page is a classic React feature that combines routing, data fetching, and rendering. Here is a focused roadmap to build it well.
Step 1: Set Up a Dynamic Route
Create a route like /restaurant/:id using React Router. The id parameter lets you fetch the right restaurant's menu.
Step 2: Read the Route Parameter
Inside the menu page component, read the id from the route using useParams. This id is what you pass to the menu endpoint.
Step 3: Fetch the Menu
In useEffect with the id as a dependency, fetch the menu endpoint with that id. Handle loading, error, and success states as always.
Step 4: Understand the Response Shape
Read the menu response shape. It usually has categories, each with items. You will often render nested lists: categories, then items within each category.
Step 5: Render the Restaurant Header
Show the restaurant name, rating, cuisine, and delivery time at the top, then the menu categories below.
Step 6: Render the Menu Items
For each category, render a heading and the list of items with name, price, and description. Use stable unique keys for every list.
Step 7: Add a Cart
Let users add items to a cart. Lift the cart state to a parent so the cart summary and the menu page can both access it.
Step 8: Handle Empty and Error States
If the menu is empty or the fetch fails, show a clear message instead of a blank page.
The Takeaway
A menu page is: a dynamic route, reading the id, fetching the menu, handling the nested response shape, rendering the header and items, and adding a cart. Build it step by step and you practice routing, fetching, and state together.
Set up a dynamic route like /restaurant/:id, read the id with useParams, fetch the menu endpoint in useEffect, handle the nested response shape, render the restaurant header and menu items with keys, and add a cart with lifted state.
Use a dynamic route with a parameter, like /restaurant/:id, and read it inside the component with useParams from React Router. That id is what you pass to the menu endpoint to fetch the right menu.
So the effect re-runs if the id changes, for example when navigating from one restaurant to another. Listing the id in the dependency array ensures you fetch the correct menu whenever the route parameter changes.
Read the response shape, which usually has categories each containing items. Render a list of categories, and for each category render a heading and the list of items. Use stable unique keys at every level of nesting.
Lift the cart state to a common parent of the menu page and the cart summary. Pass callbacks to the menu items so they can add or remove items, and let the new cart flow back down through props.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.