Why does the menu endpoint need the id as a dependency?
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.
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.
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.
Still have questions?
Browse all our FAQs or reach out to our support team