i have this Json file, it was created by me so if I would have to do some restructuring, it will be welcome.
[
{
"id": 1,
"nombre": "Tony Hawk Eye of the Hawk",
"stock": 10,
"precio": 10300,
"descripcion": "La tabla \"Eye of the Hawk\" integra los mejores estandares de calidad a la hora de construir una tabla de skate. Hecha de madera de arce resistente, esta tabla cuenta con superficie adherente en la plataforma y ejes de aluminio resistentes. Está decorada con un diseño gráfico de Hawk en la parte inferior.",
"imagen": "./images/skatetony2.jpg",
"categoria": "tabla de skate"
},
{
"id": 2,
"nombre": "Tony Hawk Diving Hawk",
"stock": 3,
"precio": 10300,
"descripcion": "La tabla \"Diving Hawk\" integra los mejores estandares de calidad a la hora de construir una tabla de skate. Hecha de madera de arce resistente, esta tabla cuenta con superficie adherente en la plataforma y ejes de aluminio resistentes. Está decorada con un diseño gráfico de Hawk en la parte inferior.",
"imagen": "./images/skatetony.jpg",
"categoria": "tabla de skate"
},
{
"id": 3,
"nombre": "Verb Adam Bergeisha",
"stock": 6,
"precio": 10300,
"descripcion": "Lujosa en diseño, la plataforma de skate modelo profesional \"Verb Adam Bergeisha\" más nueva de Nick Tucker está cubierta con un impresionante gráfico de una geisha en tonos metálicos y pastel.",
"imagen": "./images/geishaskate.jpg",
"categoria": "tabla de skate"
},
{
"id": 4,
"nombre": "Lizzie Birdhouse Medusa",
"stock": 3,
"precio": 10300,
"descripcion":"Este modelo inspirado en Lizzie Armanto ofrece un diseño duradero de arce hardrock y gráficos dementes de Medusa revisando su teléfono para un aspecto único que te inspirará a llamar a tus amigos para una sesión de patinaje.",
"imagen": "./images/skatemedusa.jpg",
"categoria": "tabla de skate"
},
{
"id": 5,
"nombre": "Hydroponic Pullet Mike",
"stock": 2,
"precio": 10300,
"descripcion":"Una tabla inspirada para todos los niveles de skaters, desde iniciales hasta pro's, con tapa de arce y un diseño fino, es ideal para probar todas las piruetas que quieras",
"imagen": "./images/skaterat.jpg",
"categoria": "tabla de skate"
},
{
"id": 6,
"nombre": "Hydroponic Mexican Skull",
"stock": 6,
"precio": 10300,
"descripcion":"Una tabla inspirada en las tipicas calacas mexicanas, con una construccion basada en arce y resina epoxi de 7 capas, es ideal para las piruetas mas extremas que tu mente puede planear",
"imagen": "./images/skatemex.jpg",
"categoria": "tabla de skate"
},
{
"id": 7,
"nombre": "Birdhouse Chicken",
"stock": 2,
"precio": 10300,
"descripcion":"Una tabla hecha con 7 capas de Hardrock Maple, lo que le aporta una mayor resistencia para poder hacer todos esos trucos que tanto nos gustan! ",
"imagen": "./images/birdchiken.jpg",
"categoria": "tabla de skate"
},
{
"id": 8,
"nombre": "Heart Supply Peace",
"stock": 2,
"precio": 10300,
"descripcion":"La Heart Supply Peace es una tabla de skateboard de calidad hecha de arce. Gracias a la construcción en arce disfrutarás de un pop excelente. Una base que presenta una forma de pop con doble kick, que te ayuda a conseguir potentes ollies y nollies con confianza.",
"imagen": "./images/skateheart.jpg",
"categoria": "tabla de skate"
},
{
"id": 9,
"nombre": "Vans Old Skool",
"stock": 2,
"precio": 15300,
"imagen": "./images/VansOldSkoolNegras.JPG",
"categoria": "calzado"
},
{
"id": 10,
"nombre": "Vans U Authentic",
"stock": 5,
"precio": 16300,
"imagen": "./images/VansUAuthentic.JPG",
"categoria": "calzado"
},
{
"id": 11,
"nombre": "Vans Era",
"stock": 5,
"precio": 10300,
"imagen": "./images/VansEra.JPG",
"categoria": "calzado"
},
{
"id": 12,
"nombre": "Vans Ultra Range",
"stock": 5,
"precio": 10300,
"imagen": "./images/VansUltraRangeNegras.JPG",
"categoria": "calzado"
},
{
"id": 13,
"nombre": "Vans U Sports",
"stock": 5,
"precio": 10300,
"imagen": "./images/VansUSports.JPG",
"categoria": "calzado"
}
]
After having this file I am trying to map it and filter it by the categories that it has inside, the problem is that when I want to create a title for each grid I only get the title repeated for each component that I map and I am not achieving my goal, someone could shed some light on this fact?
{products
.filter((category) => category.categoria)
.map((category) => {
return <h2>{category.categoria}</h2>;
})}
What I am trying to do is create a division with an intermediate title for each category, since then I would have to map the items that I have already solved, but really here I am stuck.
CodePudding user response：
First you should get your array of categories you need to show. Then based on this array of categories we can show data. So it can be like this:
// import React from "react";
const data = [
{
id: 1,
nombre: "Tony Hawk Eye of the Hawk",
stock: 10,
precio: 10300,
descripcion:
'La tabla "Eye of the Hawk" integra los mejores estandares de calidad a la hora de construir una tabla de skate. Hecha de madera de arce resistente, esta tabla cuenta con superficie adherente en la plataforma y ejes de aluminio resistentes. Está decorada con un diseño gráfico de Hawk en la parte inferior.',
imagen: "./images/skatetony2.jpg",
categoria: "tabla de skate",
},
{
id: 2,
nombre: "Tony Hawk Diving Hawk",
stock: 3,
precio: 10300,
descripcion:
'La tabla "Diving Hawk" integra los mejores estandares de calidad a la hora de construir una tabla de skate. Hecha de madera de arce resistente, esta tabla cuenta con superficie adherente en la plataforma y ejes de aluminio resistentes. Está decorada con un diseño gráfico de Hawk en la parte inferior.',
imagen: "./images/skatetony.jpg",
categoria: "tabla de skate",
},
{
id: 3,
nombre: "Verb Adam Bergeisha",
stock: 6,
precio: 10300,
descripcion:
'Lujosa en diseño, la plataforma de skate modelo profesional "Verb Adam Bergeisha" más nueva de Nick Tucker está cubierta con un impresionante gráfico de una geisha en tonos metálicos y pastel.',
imagen: "./images/geishaskate.jpg",
categoria: "tabla de skate",
},
{
id: 4,
nombre: "Lizzie Birdhouse Medusa",
stock: 3,
precio: 10300,
descripcion:
"Este modelo inspirado en Lizzie Armanto ofrece un diseño duradero de arce hardrock y gráficos dementes de Medusa revisando su teléfono para un aspecto único que te inspirará a llamar a tus amigos para una sesión de patinaje.",
imagen: "./images/skatemedusa.jpg",
categoria: "tabla de skate",
},
{
id: 5,
nombre: "Hydroponic Pullet Mike",
stock: 2,
precio: 10300,
descripcion:
"Una tabla inspirada para todos los niveles de skaters, desde iniciales hasta pro's, con tapa de arce y un diseño fino, es ideal para probar todas las piruetas que quieras",
imagen: "./images/skaterat.jpg",
categoria: "tabla de skate",
},
{
id: 6,
nombre: "Hydroponic Mexican Skull",
stock: 6,
precio: 10300,
descripcion:
"Una tabla inspirada en las tipicas calacas mexicanas, con una construccion basada en arce y resina epoxi de 7 capas, es ideal para las piruetas mas extremas que tu mente puede planear",
imagen: "./images/skatemex.jpg",
categoria: "tabla de skate",
},
{
id: 7,
nombre: "Birdhouse Chicken",
stock: 2,
precio: 10300,
descripcion:
"Una tabla hecha con 7 capas de Hardrock Maple, lo que le aporta una mayor resistencia para poder hacer todos esos trucos que tanto nos gustan! ",
imagen: "./images/birdchiken.jpg",
categoria: "tabla de skate",
},
{
id: 8,
nombre: "Heart Supply Peace",
stock: 2,
precio: 10300,
descripcion:
"La Heart Supply Peace es una tabla de skateboard de calidad hecha de arce. Gracias a la construcción en arce disfrutarás de un pop excelente. Una base que presenta una forma de pop con doble kick, que te ayuda a conseguir potentes ollies y nollies con confianza.",
imagen: "./images/skateheart.jpg",
categoria: "tabla de skate",
},
{
id: 9,
nombre: "Vans Old Skool",
stock: 2,
precio: 15300,
imagen: "./images/VansOldSkoolNegras.JPG",
categoria: "calzado",
},
{
id: 10,
nombre: "Vans U Authentic",
stock: 5,
precio: 16300,
imagen: "./images/VansUAuthentic.JPG",
categoria: "calzado",
},
{
id: 11,
nombre: "Vans Era",
stock: 5,
precio: 10300,
imagen: "./images/VansEra.JPG",
categoria: "calzado",
},
{
id: 12,
nombre: "Vans Ultra Range",
stock: 5,
precio: 10300,
imagen: "./images/VansUltraRangeNegras.JPG",
categoria: "calzado",
},
{
id: 13,
nombre: "Vans U Sports",
stock: 5,
precio: 10300,
imagen: "./images/VansUSports.JPG",
categoria: "calzado",
},
];
const Catalog = () => {
const categories = [...new Set(data.map((item) => item.categoria))];
console.log(`categories`, categories);
const renderCategory = (category) => {
return (
<div
key={category}
style={{ border: "3px solid black", margin: "5px", padding: "5px" }}
>
<h2>Categoria: {category}</h2>
<div>
{data
.filter((item) => item.categoria === category)
.map(({ id, nombre, precio }) => {
return (
<div
key={id}
style={{
border: "1px solid black",
margin: "3px",
padding: "3px",
}}
>
<div>Nombre: {nombre}</div>
<div>Precio: {precio}</div>
</div>
);
})}
</div>
</div>
);
};
return <div>{categories.map(renderCategory)}</div>;
};
// export default Catalog;
ReactDOM.render(<Catalog />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>CodePudding user response：
const groupedItem = items.reduce((acc, curr) => {
if(!acc[curr.categoria]) {
acc[curr.categoria] = []
}
acc[curr.categoria].push(curr);
return acc;
}, {})
return (
<div>
{Object.keys(groupedItem).map((k) => {
return (
<div key={k}>
<h4>{k}</h4>
<div>
{groupedItem[k].map((item) => (
<div key={item.id}>
<div>{item.descripcion}</div>
<div>{item.precio}</div>
</div>
))}
</div>
</div>
);
})}
</div>
);