0
282
Vistas¿Cómo muestro datos específicos de json que cumplen una condición?
Estoy tratando de mostrar datos particulares para un menú de nombre específico. Por ejemplo: /menu/${menuId}/{row.name} (aquí, por ejemplo, menuId= "Menu1" y row.name= "Sopa de guisantes"). Quiero obtener toda la información (en <div> o <p> de mi match.json que corresponde a Sopa de guisantes, por ejemplo, cuando hago clic en "Sopa de guisantes".
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> ) }, ...Puedo mostrar todo el contenido de match.json pero no para una selección de menú específica...
Aquí está el código: sandbox_link
1 Respuestas
Responde la pregunta0
Puede crear otra página como lo hicimos para la página de la tabla MenuDisplay . Use el menuId y el nuevo itemId de los parámetros de ruta para buscar/encontrar nuevamente los datos de matches.json .
Ejemplo:
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> </> ); }Corrija el enlace para usar la identificación del elemento del menú al que se vincula.
accessor: (row) => ( <Link to={{ pathname: `/menu/${menuId}/${row._id}` }}> {row.name} </Link> ) Agregue una ruta para manejar la representación de este nuevo componente MenuItemDisplay .
<Routes> <Route path="/menu" element={<Display />} /> <Route path="/menu/:menuId" element={<MenuDisplay />} /> <Route path="/menu/:menuId/:itemId" element={<MenuItemDisplay />} /> <Route path="*" element={<Error />} /> </Routes> 