How do I add a cart to a restaurant menu page?
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.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Roadmap to Building a Restaurant Menu Page in React
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.
Still have questions?
Browse all our FAQs or reach out to our support team