Solucionar Warning: Each child in a list should have a unique «key» prop. Al hacer un bucle de elementos dinámicos con React Native.

Tiempo de lectura: < 1 minuto

Si al ejecutar nuestro código dónde incluimos un bucle de elementos, aparece el siguiente mensaje:

«Warning: Each child in a list should have a unique «key» prop»

Esto se debe a que nuestro bucle está creando elementos iguales o clones con el mismo ID.

Imaginemos qué este es nuestro código:

elementosTab.map((elemento, index) => {
                    return (
                        <Button mode="text" onPress={elemento.onPress} >{elemento.texto}</Button>
                    );
                }

Al ejecutarlo nos aparece el siguiente mensaje:

Podemos solucionarlo añadiendo un ID distinto a cada elemento para que este error desaparezca.

Para ello añadimos la propiedad key al elemento qué estemos creando:

elementosTab.map((elemento, index) => {
                    return (
                        <Button key={index} style={[styles.boton]} mode="text" onPress={elemento.onPress} >{elemento.texto}</Button>
                    );
                }

De esta forma el problema queda resuelto.