0
125
VistasCómo mapear el componente React en la categoría correcta
Puedo mapear 3 objetos como una lista normal, sin embargo, ¿cómo puedo mapearlos bajo el encabezado correcto?
Una forma es empujar cada objeto a su propia matriz, por ejemplo, const employed = [] pero se ve desordenado. ¿Alguna sugerencia para un mejor enfoque?
export const App = () => { const [list, setList] = useState([ { name: "foo", status: "student" }, { name: "bar", status: "employed" }, { name: "foo", status: "unemployed" }, ]) const items = list.map(({name, status}, index) => { <Profile ... /> }) return ( <div> <div> <h1>Students</h1> </div> <div> <h1>Employed</h1> </div> <div> <h1>Unemployed</h1> </div> </div> ) }
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Hacer tres listas separadas usando filter() sería una forma de hacerlo. Entonces puedes mostrarlos como necesites:
export const App = () => { const [list, setList] = useState([ { name: "foo", status: "student" }, { name: "bar", status: "employed" }, { name: "foo", status: "unemployed" }, ]) const students = list.filter(x => x.status === 'student' ).map(x => <Profile... />); const employed = list.filter(x => x.status === 'employed' ).map(x => <Profile... />); const unemployed = list.filter(x => x.status === 'unemployed' ).map(x => <Profile... />); return ( <div> <div> <h1>Students</h1> {students} </div> <div> <h1>Employed</h1> {employed} </div> <div> <h1>Unemployed</h1> {unemployed} </div> </div> ) }
·
Juan Pablo Isaza
Denunciar
0
Mantenga otra asignación de sus estados a valores de encabezado y filtre la lista según los estados.
Esto también funcionaría.
import { useState } from "react"; const STATUSES = { student: "Studnets", employed: "Employed", unemployed: "Unemployed", retired: "Retired" }; const App = () => { const [list, setList] = useState([ { name: "foo", status: "student" }, { name: "bar", status: "employed" }, { name: "foo", status: "unemployed" }, { name: "baz", status: "student" } ]); return ( <div> {Object.entries(STATUSES).map(([statusKey, displayValue]) => { const data = list .filter(({ status }) => status === statusKey) .map(({ name, status }, index) => <div>{name}</div>); if (data.length > 0) { return ( <div> <h1>{displayValue}</h1> {data} </div> ); } })} </div> ); }; export default App; 
·
Juan Pablo Isaza
Denunciar
Responde la pregunta