Tengo este archivo json que fue creado por mi, si para facilitar la tarea deberia cambiarlo, por favor diganlo
[
{
"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"
}
]
El cual necesito filtrar, ya que debo mostrar los elementos agrupados por su "categoria", logre filtrar la categoria y mostrarla en los titulos, pero no logro hacer que los elementos que se muestran debajo de cada titulo contengan esas categorias, ya que seria como un proyecto de simulacion de una tienda.
const ItemList = () => {
const [products, setProducts] = useState([]);
useEffect(() => {
setTimeout(() => {
fetch("./data.json")
.then((Response) => Response.json())
.then((data) => setProducts(data));
}, 2000);
}, []);
const categories = [...new Set(products.map((category) => category.categoria))]
return (
<div>
{categories.map((category =>{
return [<h2>{category}</h2>,
<div className="grillaProductos">
{products.filter(category => category.categoria).map(product =>{
return <Item data={product} key={product.id}/>
})}
</div>]
}))}
</div>
);
};
Desde ya agredezco su lectura, y cualquier mano que puedan aportar para salir del embrollo, lo agradeceria
!!