1

Tengo una app de react que tiene un componente tabla que imprime X cantidad elementos tr y td de acuerdo al prop data el cual es un array de objectos, dicho objectos tienen un id, el cual estaba usando para generar las key, el problema es que este id solo me sirve para un elemento y como pueden ver necesito generar varios ids para todos estos elementos porque si no react me lanza el siguiente error.

 Encountered two children with the same key

Ejemplo de la data:

[
  { id:1, name: "carro", quantity: 12 },
  { id:2,  name: "microfono", quantity: 12 },
  { id:3,  name: "pc", quantity: 12 },
]

Mi componente tabla:

import { Table } from "react-bootstrap";

export const TableComponent = (props) => {
  return (
    <div>
      <Table striped bordered hover responsive>
        <thead>
          <tr>
            <th>NOMBRE</th>
            <th>CANTIDAD</th>
            <th>OPCIONES</th>
          </tr>
        </thead>
        <tbody>
          {/* TODO: generate unique keys */}
          {props.data.map((e, index) => {
            return (
              <tr key={e.id}>
                <td key={e.id}>{e.name}</td>
                <td key={e.id}>{e.quantity}</td>
                <td key={e.id}>borrar</td>
              </tr>
            );
          })}
        </tbody>
      </Table>
    </div>
  );
};

¿Cómo generar keys unicas para evitar este error?

3
  • ¿Porque no usar la propiedad index de map en el tr? O también crear un id personalizado, saludos
    – g.4
    Commented el 2 nov. 2021 a las 21:59
  • @g.4 Es importante recordar que no siempre es una buena idea utilizar indices para los keys. "We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state.". Fuente.
    – FranAcuna
    Commented el 2 nov. 2021 a las 22:02
  • 1
    @FranAcuna estoy de acuerdo con lo que mencionas, pero en la Doc el equipo de React sugiere usar el index si los ID's no son estables, como último recurso. Saludos
    – g.4
    Commented el 2 nov. 2021 a las 22:22

4 respuestas 4

3

No es necesario agregarle key a los elementos hijos de la etiqueta <tr>, puedes agregarsela solamente a esta misma.

Tambien, puedes agregarles el indice que te devuelve como argumento en la funcion que pasas como parametro en el metodo .map(...

Puedes dejarlo algo asi:

 <tbody>
  {/* TODO: generate unique keys */}
  {props.data.map((e, index) => {
    return (
      <tr key={index}>
        <td>{e.name}</td>
        <td>{e.quantity}</td>
        <td>borrar</td>
      </tr>
    );
  })}
</tbody>

Saludos, espero ayudarte.

3
  • Tu repuesta es muy útil porqué evita los problemas que se me presentaron, sin embargo marque la de @FranAcuna como correcta porque es la que responde al título de la pregunta, igualmente quiero agredecerte porque a pesar de que la repuesta de Fran es la marcada como correcta, termine usando en mi código la tuya.
    – Ivandez
    Commented el 2 nov. 2021 a las 23:16
  • Me alegra saber quer fue muy util, la idea es ayudar, saludos y abrazos @Ivandez Commented el 2 nov. 2021 a las 23:23
  • 1
    Cuanto se tiene el id no se recomienda usar el index por problemas de performance, en la documentación habla de esto, como tu respuesta fue calificada, es mejor que la edites asi tu respuesta estaría mas completa
    – Daniel
    Commented el 3 nov. 2021 a las 3:56
2

Para el key se elige un valor que lo identifique de los demas, en este caso es tu id

<tr key={e.id}>
                <td>{e.name}</td>
                <td>{e.quantity}</td>
                <td>borrar</td>
              </tr>

Cuanto no se tiene un id, se utiliza el index

{props.data.map((e, index) => {
            return (
              <tr key={index}>
                <td>{e.name}</td>
                <td>{e.quantity}</td>
                <td>borrar</td>
              </tr>
            );
          })}
        </tbody>

En la documentación te explica mas a detalles el uso de la keys

2
  • ¿Siempre aplica esta regla de usar la key en el elemento padre? si tengo por ejemplo div>h1>b ¿Solo tengo que agregar la key al elemento div?
    – Ivandez
    Commented el 2 nov. 2021 a las 23:20
  • 2
    @Ivandez Asi es, en la documentación que te puse como referencia explica a detalles eso, la respuesta que calificaste,yo no lo recomiendo, porque ya lo estas aplicando al <tr> ya no es necesario aplicarlo al <td>
    – Daniel
    Commented el 2 nov. 2021 a las 23:36
0

Si alguno de los datos que vas a recibir son únicos entonces usa esos datos, esto te garantizara que el key sea único, para tu ejemplo, si el id que viene de la base de datos es único yo usaría ese.

Puedes también utilizar el id concatenado con palabras que describan el elemento para hacer keys diferentes que estén relacionadas al mismo elemento, algo así:

{props.data.map(({id,name,quantity}, index) => 
  (
      <tr key={`row-${id}`}>
       <td key={`name-${id}`}>{name}</td>
       <td key={`quantity-${id}`}>{quantity}</td>
       <td key={`delete-${id}`}>borrar</td>
     </tr>
  )
 )}

Usé destructuring para evitar hacer referencia al elemento e en cada iteración. También no ocupas especificar el return dentro del arrow function del map, puedes devolver el elemento creado directamente.

1
  • 1
    Gracias, tenia este problema en este componente lanzando este error desde hace tiempo pero ya no.
    – Ivandez
    Commented el 2 nov. 2021 a las 23:15
0

Puedes crear keys dinámicamente utilizando los corchetes [] de esta manera

// Tengo un arreglo la cual hará mis keys diferentes
    const arreglo = [1, 2 ,3]
    //mi nuevo arreglo de objetos
    const objetos = [];
    arreglo.map(function(x){
      Objeto = {}
      //añado la propiedad con el nombre o key que tendrá, en pocas palabras esta key es un consecutivo de mi array "arreglo"
      Objeto[`id${x}`] = "Id dinamico"
      objetos.push(Objeto)
    })
    console.log(objetos)
Viendo un poco lo que requieres entiendo que debes necesitar que todas tus keys "id" sean distintas, en tu caso ese array de objetos debe ser dinamico, debes necesitar algo que te haga diferenciar unos con otros, es decir que para objeto en tu arreglo debe tener algún dato que lo haga distinto de los demás, puedes utilizar ese dato para diferenciarlo del resto y utilizarlo en tu key

3
  • 1
    ¿Cómo lo aplicas al caso de uso que nos presenta @ivandez? Saludos
    – g.4
    Commented el 2 nov. 2021 a las 22:30
  • @g.4 me ganas con esa pregunta, sería muy complicado hacerlo, en mi mente pienso en utilizar en un Object.keys(), realmente hacerlo de esta manera es demasiado complejo e innecesario a comparación de utilizar el valor de tus propiedades como llaves únicas. Commented el 3 nov. 2021 a las 0:38
  • La función que propones si crea id's dinámicos como propiedad para un array de objetos, me llamo la atención; ahora bien, como ya vimos en las respuestas con React hay otras formas. Saludos
    – g.4
    Commented el 3 nov. 2021 a las 1:40

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.