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>
div(<>:</>)
del bucle