0
196
VistasREACCIONAR: las pestañas múltiples no funcionan, los encabezados y el cuerpo no se muestran
Traté de usar varias pestañas en reaccionar. Pero no parece funcionar (ver la imagen). No puedo mostrar el encabezado de mis Tabs ni el cuerpo (de match.json) que debería contener un textbox field como entrada...
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;Visualización del elemento de menú:
export default function MenuItemDisplay() { const { match } = JsonData; ... <Tabs data={match.questions[0]} /> </div> </> ); }partido.json:
{ "match": [ { ... "_ids": [ "questions": [ { "name": "Tell me about yourself ", "typeProof": "" }, ... ], ] } ] }
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Los datos que desea enviar al componente Tabs son la matriz de questions del elemento coincidente actualmente.
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); Aquí el item es el elemento del menú actual que se representa, "Sopa de guisantes" o el elemento "123ml66" por ejemplo:
{ "_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 }, Pase item.questions al componente Tabs .
<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> ); 
·
Juan Pablo Isaza
Denunciar
Responde la pregunta