I am mapping an array that comes to me by props from another component. I have made several changes but still can't find a solution. I understand that each element must have a unique id, but how to do it when it is a data set?
PS: The array elements are displayed correctly in the render (or view), but the error in the console bothers me.
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>
</>
))
}
</>
)
}
Put the key={id} in the div, but it didn't work. Put the key={id} in each of the items, but they would be repeating.
I sent the appointment in this way
<div className="col-5 border">
<Cita
citas={citas}
/>
</div>
The problem, or warning that the console gives you is because react needs a unique identifier as you mentioned, but by adding the fragments
<></>
before the element<div></div>
Your first element is the fragment which cannot have a key unless you use<React.Fragment key={miKey}>
To fix the error just remove the snippet
<></>
or change to<React.fragment key={...}>
the one that is not needed for the example you have.Your code would look like this: