How do I display specific data from json that fulfill a condition?

user_14430938 0
Viewed 98

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

react-router react-hooks reactjs html javascript
1 Answers

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>

Edit react-how-do-i-display-specific-data-from-json-that-fullfill-a-condition

user_86908570
Related