1

Tengo un Problema necesito poder utilizar el _id que da por defecto Mongodb para poder obtener una contraseña, Pero lo que pasa es que en el sigueinte codigo en donde ya se obtuvo la informacion del servidor donde esta lista para imprimirse en data.map si me deja ver el id como se puede apreciar lo estoy impirmiendo en pantalla pero cuando quiero pasarlo como un parametro de un objeto que estoy importando simplemente falla se imprimo el texto que puse en CardProductoHome "No hay key" que puse como prueba, como le puedo hacer para que obtenerlo y lo pueda importar en esta funcion

import axios from 'axios';
import CardProductoHome from "../Atoms/CardProductoHome";

const ConjuntoCards = ({ url }) => {
const [data, setData] = useState()

    useEffect(() => {
        return axios.get(url)
        .then(  async result => {
            const  resp = await result
            setData(resp.data)
        })
        .catch( err =>{
            let error = err
            console.log(error)
        })
    },[data, url ])

    return(
        <div>
            {
                data ? 
                data.map( (props)=>{
                    const id = props._id
                    console.log(id)
                    return(
                        <CardProductoHome 
                            description={props.description}
                            precio={props.price}
                            title={props.title}
                            key={id}
                        />
                    )
                })
                : 
                null
            }
        </div>
    )
}
export default ConjuntoCards;

Este es el codigo del principal Conjunto de Cards en el console.log de id si se imprime el _id Correctamente

Y en esta funcion que estoy importando el key ya no me funciona

const CardProductoHome = ({
    precio, 
    title, 
    description, 
    key
}) => {

    return (
        <div id = { key }>
        <div>
            {
                <h1>{ key ? key : "No hay Key" }</h1>
            }
            <h2>{precio}</h2>
            <h1>{title}</h1>
            <p>{description}</p>
        </div>
        <div>
            <ShowImage img={key}/>
        </div>
    </div>
    )
}
export default CardProductoHome; ```
2

1 respuesta 1

1

key es una palabra reservada para react, y por tanto no te va a funcionar. Debes usar una alternativa como keyy ó _key, por ejemplo.

key

Keys ayuda a React a identificar cual item ha cambiado, ha sido agregado o es removido. Keys debe ser pasado a los elementos dentro del arreglo para darles una identificación estable.

Puedes ver más sobre esto en esta respuesta

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.