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

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>
        )
      }, ...

menus.json :

{
  "menus": [
    {
      "id": "Menu1",
      "title": "Soup",
      "price": 4,
      "invited": [
        {
          "name": "Jose Luis",
          "location": "LA"
        },
        {
          "name": "Smith",
          "location": "New York"
        }
      ]
    },...

match.json:

{
  "match": [
    {
      "_id_menu": "Menu1",
      "_ids": [
        {
          "_id": "123ml66",
          "name": "Pea Soup",
          "description": "Creamy pea soup topped with melted cheese and sourdough croutons.",
          "dishes": [
            {
              "meat": "N/A",
              "vegetables": "pea"
            }
          ]
        },
        {
          "_id": "123kj56",
      ...

I'm able to display all the content of the match.json but not for a specific menu selection...

Here is the code :

CodePudding user response：

 pathname: `/menu/${menuId}/${row.name}

You don't seem to have a route setup for <Route path="/menu/:menuId/:RowName" element={<Display the menu item component />} />