1

Estoy mapeando un arreglo que me llega por props desde otro componente. He hecho varios cambios pero aun no encuentro solucion. Entiendo que cada elemento debe tener un id unico, pero ¿como hacerlo cuando es un conjunto de datos?

PD: Los elementos del arreglo se muestran correctamente en el renderizado (o vista), pero el error en consola me incomoda.

export const Cita = ({citas}) => {
    return (
        <>

        <h4>Listado de citas</h4>
        {
            citas.map(item =>(
                <>
                <div key={item.id}>
                    <h5>{item.mascota}</h5>
                    <h5>{item.propietario}</h5>
                    <h5>{item.fecha}</h5>
                    <h5>{item.hora}</h5>
                    <h5>{item.sintomas}</h5>
                </div>
                </>
            ))
        }

        </>
    )
}

Coloque el key={id} en el div, pero no funciono. Coloque el key={id} en cada uno de los items, pero se estarian repitiendo.

La cita la envio de esta forma

 <div className="col-5 border">
          <Cita
          citas={citas}
          />
 </div>

1
  • Prueba con eliminar el primer div(<>:</>) del bucle
    – MitaCloud
    Commented el 28 oct. 2021 a las 10:24

1 respuesta 1

4

El problema, o advertencia que te da la consola es porque react necesita un identificador único como lo mencionaste, pero al agregar los fragment <></> antes del elemento <div></div> Tu primer elemento es el fragment el cual no puede tener una key a menos que utilices <React.Fragment key={miKey}>

Para corregir el error solo elimina el fragment <></> o cambia por <React.fragment key={...}> el cual no es necesario para el ejemplo que tienes.

Tu código quedaría así:

    export const Cita = ({citas}) => {
    return (
        <>

        <h4>Listado de citas</h4>
        {
            citas.map(item =>(
                <div key={item.id}>
                    <h5>{item.mascota}</h5>
                    <h5>{item.propietario}</h5>
                    <h5>{item.fecha}</h5>
                    <h5>{item.hora}</h5>
                    <h5>{item.sintomas}</h5>
                </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.