0
280
ViewsHow do I display specific data from json that fulfill a condition?
I'm trying to display particular data for a specific name menu.
For example : /menu/${menuId}/{row.name} (here for instance menuId= "Menu1" and row.name= "Pea Soup"). I want to get all the information ( in <div> or <p> from my match.json that corresponds to Pea Soup for example when I'm clicking on "Pea Soup".
export default function MenuDisplay() {
const { menuId } = useParams();
const { match } = JsonData;
const matchData = match.find((el) => el._id_menu === menuId)?._ids ?? [];
const data = useMemo(
() => [
{
Header: "Name",
accessor: (row) => (
<Link to={{ pathname: `/menu/${menuId}/${row.name}` }}>
{row.name}
</Link>
)
}, ...
I'm able to display all the content of the match.json but not for a specific menu selection...
Here is the code : sandbox_link
1 answers
Answer question0
You can build out another page like we did for the MenuDisplay table page. Use the menuId and the new itemId from the route params to again search/find the matches.json data.
Example:
function MenuDisplay() {
const { menuId, itemId } = useParams();
const { match } = JsonData;
const matchData = match.find((el) => el._id_menu === menuId)?._ids ?? [];
const item = matchData.find((el) => el._id === itemId);
return (
<>
<h1>Menu Item</h1>
<div>
<p>Name: {item.name}</p>
<p>Description: {item.description}</p>
<p>Dishes: {Object.values(item.dishes[0]).join(", ")}</p>
</div>
</>
);
}
Fix the link to use the item id of the menu item being linked to.
accessor: (row) => (
<Link to={{ pathname: `/menu/${menuId}/${row._id}` }}>
{row.name}
</Link>
)
Add a route to handle rendering this new MenuItemDisplay component.
<Routes>
<Route path="/menu" element={<Display />} />
<Route path="/menu/:menuId" element={<MenuDisplay />} />
<Route path="/menu/:menuId/:itemId" element={<MenuItemDisplay />} />
<Route path="*" element={<Error />} />
</Routes>
