REACT- Multiple Tabs don't work, headers and body don't diplayed

Question

I tried to use multiple tabs in react. But it doesn't seem working (please see the picture). I 'm not able to display the header for my Tabs neither the body (from match.json) that should contained a textbox field as input...

import React from "react";
import { Tab, Tabs as TabsComponent, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";

const Tabs = ({ data }) => (
  <TabsComponent>
    <TabList>
      {data.map(({ name }, i) => (
        <Tab key={i}>{name}</Tab>
      ))}
    </TabList>
    {data.map(({ name }, i) => (
      <TabPanel key={i}>{name}</TabPanel>
    ))}
  </TabsComponent>
);

export default Tabs;

MenuItemDisplay:

 export default function MenuItemDisplay() {
  const { match } = JsonData;
  ...
        <Tabs data={match.questions[0]} />
      </div>
    </>
  );
}

match.json :

 {
  "match": [
    {
      ...
      "_ids": [
          "questions": [
            {
              "name": "Tell me about yourself ",
              "typeProof": ""
            },
            ...
          ],
        ]
      }
    ]
}

Answer 1

The data that you want to send to the Tabs component is the currently matched item's questions array.

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);

Here item is the current menu item being rendered, "Pea Soup", or item "123ml66" for example:

{
  "_id": "123ml66",
  "name": "Pea Soup",
  "description": "Creamy pea soup topped with melted cheese and sourdough croutons.",
  "dishes": [
    {
      "meat": "N/A",
      "vegetables": "pea"
    }
  ],
  "questions": [
    {
      "name": "Tell me about yourself ",
      "typeProof": ""
    },
    {
      "name": "Why our restaurant?",
      "typeProof": ""
    },
    {
      "name": "What hours are you available to work ?",
      "typeProof": "Planning"
    }
  ],
  "invited": [
    {
      "name": "Jose Luis",
      "location": "LA"
    },
    {
      "name": "Smith",
      "location": "New York"
    }
  ],
  "taste": "Good",
  "comments": "3/4",
  "price": "Low",
  "availability": 0,
  "trust": 1
},

Pass item.questions to the Tabs component.

<Tabs data={item.questions} />

...

const Tabs = ({ data }) => (
  <TabsComponent>
    <TabList>
      {data.map(({ name }, i) => (
        <Tab key={name}>Question {i + 1}</Tab>
      ))}
    </TabList>
    {data.map(({ name }) => (
      <TabPanel key={name}>{name}</TabPanel>
    ))}
  </TabsComponent>
);