0
236
Vistas¿Cómo usar el mapa en reaccionar para crear múltiples componentes?
Tengo esta matriz que tiene esta estructura, verifique el código a continuación, mis resultados finales deberían ser similares a los siguientes:
- verduras
- manzana
- zanahoria
- carne
- pollo
- filete
mis resultados actuales son
bistec de pollo con manzana y zanahoria
ya que no puedo estructurar la matriz de otra manera y no quiero entrar en un anidamiento profundo o incluso en bucles de anidación, lo que dudo que funcione en reaccionar cualquier idea de cómo lograr los resultados anteriores usando map , donde mapeo a través del grupo solo una vez para crear el nombre del grupo y luego agregar los elementos relacionados con ese grupo dentro de ese grupo?, algo para pensar: ¿podría aprovecharse también aquí la representación condicional? Solo pude obtener el grupo varias veces o solo los elementos.
const arr = { itmes: [ { id: 1, group: "veg", item: "apple" }, { id: 2, group: "veg", item: "carrot" }, { id: 3, group: "meat", item: "chicken" }, { id: 4, group: "meat", item: "steak" } ] }; function App() { return ( <div> {arr["itmes"].map( (item) => item.group //item.item )} </div> ); }3 Respuestas
Responde la pregunta0
Opción 1
Primero, asegúrese de que su matriz esté ordenada por Grupo:
const sorted = arr["itmes"] .sort((a, b) => (a.group || '').localeCompare(b.group));Luego puede representar y agregar condicionalmente otro elemento de encabezado cada vez que cambie el nombre del grupo:
<ul> {data.map((d, id) => ( <> ((id > 0 || d.group !== data[id - 1].group) ? <li key={`${id}-h`}><b>{d.group}</b></li> : undefined) <li key={`${id}-v`}>{d.item}</li> </> ))} </ul>Extra: clasificación de grupos personalizados
Si necesita ordenar de forma personalizada la matriz de acuerdo con otra matriz:
const sortLtu = ['veg', 'apple', 'meat']; data.sort((a, b) => sortLtu.indexOf(a.group) - sortLtu.indexOf(b.group));Opción 2: función de utilidad
Si termina haciendo esto a menudo, puede crear una función útil:
Array.prototype.groupBy = function(cb) { const groups = []; this.forEach((d, id, arr) => { const g = cb(d, id, arr); let group = groups.find(_g => _g.group === g); if (!group) { group = { group: g, items: [] }; groups.push(group); } group.items.push(d); }) return groups; }Y luego úsalo como
{data.groupBy(i => i.group).map((bundle, ix) => ( <div key={ix}> <b>{bundle.group}</b> <ul> {bundle.items.map((item, ix) => <li key={ix}>{item.item}</li>)} </ul> </div> ))}0
Primero debe envolver los elementos y renderizar los agrupados.
const groupItems = items => items.reduce((groupedItems, item) => { if (!groupedItems[item.group]) { groupedItems[item.group] = [] } groupedItems[item.group].push(item) return groupedItems }, {}) const items = Object.entries(groupItems(arr.items)).map( ([groupName, items]) => ( <React.Fragment> <li>{groupName}</li> {items.map(item => ( <li>{item.item}</li> ))} </React.Fragment> ) ) 
0
Soy muy nuevo en javascript, pero como la respuesta de hgb123 , algo como esto dentro de un bloque de procesamiento o retorno:
<div className="myClass"> {myList.map((eachItemInList) => ( <ReactComponent certainProp={eachItemInList} /> ))} </div>funciona perfectamente para una lista como esta:
const myList = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6']¡espero que esto haya ayudado a alguien!