Las claves en ReactJS ayudan a identificar qué elementos de la lista se han cambiado, eliminado o agregado. Las claves se utilizan como accesorios para nuestro operador de mapas mientras itera la lista. No podemos usar claves en React como accesorios para el componente secundario. Se recomienda principalmente usar strings como claves que son únicas.
React usa estas claves para crear una relación entre el elemento DOM y el componente. Determina si el componente debe renderizarse o no. La identidad única se otorga al elemento, lo que ayuda a obtener un seguimiento de qué elemento en el DOM se ha actualizado, eliminado o agregado.
Sintaxis: estamos utilizando un operador de mapa para iterar una lista que devuelve los elementos.
{list.map((item => {
return (<li key="key">{item}</li>)
})}
El siguiente ejemplo ilustrará el uso de claves en React.
Ejemplo: Comenzaremos construyendo números de arreglos simples y luego iteraremos sobre ellos.
App.js
const num = [1, 2, 3, 4];
function App() {
return (
<div className="App">
<li>
{num.map(item => {
return (
<option>{item}</option>
);
})}
</li>
</div>
);
}
export default App;
Registro de consola: veremos errores, solicitando claves únicas para que sea más fácil saber qué elemento se ha editado, cambiado o eliminado.
Usando la propiedad clave: Ahora, agregaremos la propiedad clave a la lista de elementos. Podemos usar el elemento en sí mismo como las claves, ya que la array contiene elementos distintos, por lo que no será un problema.
App.js
const num = [1, 2, 3, 4];
function App() {
return (
<div className="App">
<ul>
{num.map(item => {
return (
<option key={item}>
{item}
</option>
);
})}
</ul>
</div>
);
}
export default App;
Registro de la consola: ahora, no podemos ver más errores en la consola.
Sin embargo, esta no es una forma ideal de definir la clave, ya que una array con elementos duplicados asignará claves duplicadas y generará un error. Por ejemplo, usando la siguiente array como claves, obtendremos el siguiente resultado.
const num = [1,2,3,4,1];
Registro de consola: Mostrará el error de que dos niños tienen las mismas llaves.
Usando el índice de la función de mapa como claves: También podemos pasar los índices de los elementos que proporciona la función de mapa como las claves de los elementos de la lista. Esto eliminará el caso en que los elementos mismos no sean distintos.
App.js
const num = [1, 2, 3, 4, 1];
function App() {
return (
<div className="App">
<ul>
{num.map((item, index) => {
return (
<option key={index}>
{index} > {item}
</option>)
})}
</ul>
</div>
);
}
export default App;
Producción:
Una solución ideal: en el caso de una lista dinámica, donde se puede filtrar o reordenar, el enfoque anterior no funcionará correctamente y provocará un comportamiento inestable de los componentes. Si ya tiene una identificación única mencionada en la lista que se mostrará, siempre puede usarla como su clave. Esta es la forma preferida de representar la lista, ya que estas identificaciones únicas ayudarán a React a comprender el orden de los elementos.
Ejemplo: supongamos un ejemplo de una array de colores que tienen algunos identificadores que usaremos como nuestras claves.
App.js
const colors = [
{
id: 1,
value: "red"
}, {
id: 2,
value: "green"
}, {
id: 3,
value: "black"
}
];
function App() {
return (
<div className="App">
<ul>
{colors.map(item => {
return (
<option key={item.id}>
{item.value}
</option>
)
})}
</ul>
</div>
);
}
export default App;
Producción:
