0

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!


10
  • A que te refieres con que se rompe? hay mensajes de error? compartelos
    – g.4
    Commented el 13 abr. 2023 a las 19:36
  • No hay un mensaje de error, el componente no se renderiza. Asi como esta unicamente renderiza las cards correspondientes a la categoria. Yo necesito que renderice un card en particular. Commented el 13 abr. 2023 a las 19:40
  • Verifica que ese element.id tenga valores en el array items, si no hay errores puede que ese array items este vacio.
    – g.4
    Commented el 13 abr. 2023 a las 20:21
  • El elemnt.id tiene datos, ya que los recibe por props products que es un objeto, con los datos. Lo chequie con el console.log Commented el 13 abr. 2023 a las 20:24
  • 1
    Solucionado, gracias por tu ayuda! Commented el 14 abr. 2023 a las 13:36

1 respuesta 1

0

Listo solucionado para todo aquel que tenga el mismo problema. Lo soluciono chatgpt con el siguiente codigo:

return ( {

        props.products.map((element) => {
          
            if (element.id === idCategory) {

                return (
                    element.items.map(items => {
                        
                        if (items.idProduct == idItem) {
                            console.log(element.items.idProduct)
                            return (
                                <div>
                                    <img src={items.img} className='imgs-card' />
                                    <div className="informacion-details">
                                        <p>{items.nameProduct}</p>
                                        <p>{items.description}</p>
                                        <p className="precio-details">{items.price}<span>.99</span></p>
                                        <button>Comprar</button>
                                    </div>
                                </div>
                            )
                        } 
                    })
                )
            } else {
                return null;
            }
        })
    }
</div>

)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.