Principiantereact
Renderizar Listas y el uso de Keys
Transforma arrays de datos en múltiples elementos de la interfaz usando el método .map().
Usando .map() para iterar
En React no usamos bucles
for dentro del JSX. Para convertir datos (un Array) en elementos visuales, usamos el método .map() de JavaScript, que crea un componente por cada elemento.jsx
1const frutas = ["Manzana", "Banana", "Cereza"];
2
3function ListaFrutas() {
4 return (
5 <ul>
6 {frutas.map(fruta => (
7 <li key={fruta}>{fruta}</li>
8 ))}
9 </ul>
10 );
11}¿Por qué necesitamos la propiedad "key"?
React necesita una prop llamada
key cada vez que renderizas listas iteradas. Esta "llave" debe ser única (normalmente el ID del elemento en la base de datos).
Gracias a este identificador exacto, si un elemento se borra, cambia de orden o se modifica, el Virtual DOM de React sabe exactamente qué elemento del DOM actualizar en lugar de renderizar toda la lista de nuevo, logrando una velocidad masiva.