Estoy obteniendo mis datos de la base de datos. Luego, me gustaría que se categorizaran por "item_category" y tenerlos en acordeón de arranque de reacción.
Hasta ahora tengo esto:
<Accordion> { items.map((item, index) => { if(item.item_category === "Submachines"){ return ( <Accordion.Item eventKey={index} key={index}> <Accordion.Header>{item.item_category}</Accordion.Header> <Accordion.Body> <Item key={index} itemName={item.item_name} itemImageUrl={item.item_image} itemCategory={item.item_category} sellPrice={item.sell_price} buyPrice={item.buy_price} slotSize={item.slot_size} /> </Accordion.Body> </Accordion.Item> ); } }) } </Accordion>Pero es un poco incorrecto ya que esto está creando un elemento de acordeón para cada elemento en la matriz de elementos. Lo que me gustaría tener es que cada categoría tenga solo un elemento de acordeón.
¿Puede alguien señalarme en la dirección correcta, por favor? Gracias
Puede obtener elementos del backend ya agrupados por categoría o puede solicitar una categoría mientras itera sobre sus elementos, guardarlos agrupados por categoría y solo luego renderizar Accordion.Item para cada categoría:
Objeto de categorías de ejemplo:
const categories = { "catA": [ item1, item2, item3], "catB": [ item4, item5, item6], "catC": [ item7, item8, item9] }Editar :
Consulte los siguientes códigos y caja: https://codesandbox.io/s/charming-mirzakhani-9n344i
const categories = {}; for (const item of items) { if (item.item_category in categories) { categories[item.item_category].push(item); } else { categories[item.item_category] = [item]; } } return ( <Accordion> {Object.entries(categories).map((entry) => { const category = entry[0]; const itemList = entry[1]; return ( <Accordion.Item eventKey={category} key={category}> <Accordion.Header>{category}</Accordion.Header> <Accordion.Body> {itemList.map((item) => ( <span>{item.name} </span> ))} </Accordion.Body> </Accordion.Item> ); })} </Accordion> );Una forma más limpia de lograr esto, primero necesita obtener una categoría agrupada de elementos y luego crear Accroding.Item para cada categoría como esta:
const categorySet = new Set(); items.map((item) => categorySet.add(item.item_category)); const categoryArray = [...categorySet] categoryArray.map(category => <According.Item .... rest of the component code