React: Warning: Each child in a list should have a unique "key" prop

Questions
1

I get this message on the web console when running my F7-React app. It seems a key property is required, but i can’t find how to set it …

Here is the causing function:

function AbonadoListItem({ id, nombre, apellido, foto, pais, email }) {
  return (
    <ListItem
      key={id}
      link="#"
      title={nombre + " " + apellido}
      subtitle={pais}
      text={email}
    >
      <img slot="media" src={foto} width="60" />
    </ListItem>
  )
};
2

Key property must be set where you use components it in loops, not on single root component

3

Well, it is called from a loop …

            {this.state.abonados.map(abonado => (
              <AbonadoListItem
                id={abonado.id}
                nombre={abonado.nombre}
                apellidos={abonado.ape1 + ' ' + abonado.ape2}
                foto={abonado.foto}
                sexo={abonado.sexo}
                fnac={abonado.fnac}
              />
            ))}
4

You need to add key here:

<AbonadoListItem
  key={abonado.id}
  id={abonado.id}