estoy teniendo un problema constante al intentar renderizar el detalle de un producto en particular. Lo que sucede es que cuando intento agregar un segundo if que compare el id recibido por el path de la ruta usando el hook useParams la aplicacion se rompe completamente. Ademas tambien tengo un problema que en por mas que este en la misma ruta el componente rompe las imagenes. Adjunto codigo del componente
import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom';
export default function ItemDetailsContainer(props) {
const [idCategory, setIdCategory] = useState("");
const [idItem, setIdItem] = useState("");
const param = useParams();
useEffect(() => {
if (props.products) {
props.products.forEach((element) => {
if (element.category === param.item) {
setIdCategory(element.id);
}
});
}
setIdItem(param.id)
}, [param]);
return (
<div className="contenedor-details">
{
props.products.map((element) => {
if (element.id === idCategory) {
return (
element.items.map(items => (
<div>
<img src={items.img} className='imgs-card' />
<div className="informacion">
<p>{items.nameProduct}</p>
<p className="precio">{items.price}<span>.99</span></p>
<button>Comprar</button>
</div>
</div>
))
)
}
})
}
</div>
)
}
Necesito unicamente renderizar el componente donde la ruta y la categoria coinicidan con el path del useParams. Desde ya muchas gracias!
element.id
tenga valores en el arrayitems
, si no hay errores puede que ese arrayitems
este vacio.