Skip to main content
se eliminaron 1570 caracteres en el cuerpo
Origen Enlace

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

return (
    <div className="contenedor-details">
        {

            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>
)

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

return (
    <div className="contenedor-details">
        {

            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>
)
se añadieron 1648 caracteres en el cuerpo
Origen Enlace

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

return (
    <div className="contenedor-details">
        {

            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>
)

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

return (
    <div className="contenedor-details">
        {

            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>
)
Origen Enlace

Como agregar un condicional IF a un componente de renderizado en el cual hago dos .map?

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!