Uso de la asignación para mostrar los datos dentro de una matriz

Completado

A menudo se encontrará trabajando con colecciones de datos almacenados en una matriz. Aunque trabajar con datos de matrices es similar a trabajar con cualquier otro objeto, se necesita la capacidad de recorrer en bucle los datos y mostrarlos al usuario. Como podría sospechar, esto se hace en JSX mediante código de JavaScript. En concreto, se usa la función map.

map permite crear una copia modificada de una matriz. Esto resulta útil cuando es necesario convertir los valores de una matriz para mostrarlos. Para mostrar los valores a un usuario, toma el valor e lo inserta dentro de un elemento HTML. Este es un trabajo perfecto para map. Con map, puede crear una nueva matriz que consta de HTML que contiene valores individuales en la matriz para su visualización.

Use map

map se comporta de forma similar a un bucle for...of o al método forEach. Se ejecuta una vez para cada elemento de la matriz. La diferencia clave es que genera una nueva matriz con los valores devueltos por la función que se pasa a map.

Exploremos map viendo cómo se puede crear un nueva matriz a partir de otra existente con los números al cuadrado. Empiece por crear una matriz de números.

const numbers = [2, 5, 8];

Luego, utilice map. map acepta una función con un parámetro único. El parámetro se establecerá en el valor de cada número de la matriz original. Para ello, creará una función anónima utilizando la sintaxis => o de flecha gruesa.

const squared = numbers.map((number) => {
    return number * number;
});

squared es una nueva matriz que contiene los números originales al cuadrado. Si los ha mostrado mediante console.log, verá lo siguiente:

console.log(squared);
// Output: [4, 25, 64]

Acceso al índice para generar una clave

Al mostrar listas en React, establezca una clave para cada elemento. Esto permite tanto a React como al usuario hacer referencia a los elementos individuales que se están mostrando actualmente y relacionarlos con los datos enlazados. La forma más común de generar una clave es usar el índice del elemento en la matriz.

Cuando se utiliza un bucle for, se genera inherentemente un índice como parte de la sintaxis. Cuando se utiliza map, se puede acceder al índice utilizando un segundo parámetro en la función delegada. El segundo parámetro se establece automáticamente en el índice actual.

const squared = numbers.map((number, index) => {
    console.log(`Processing item ${index + 1}`);
    return number * number;
});

Asignación con React

Como se ha destacado en un ejemplo anterior, se suele utilizar map para mostrar una lista de elementos. La diferencia clave es que, en lugar de devolver números (como en el ejemplo), se devuelve JSX. React tiene una directriz que indica que todos los elementos mostrados deben tener una clave. Si los elementos que se muestran no tienen una clave natural, es habitual usar el índice. Por ejemplo, si quiere mostrar los números al cuadrado en elementos div, puede utilizar lo siguiente:

const squared = numbers.map((number, index) => {
    return (
        <div key={index}>{ number * number }</div>
    );
});

Puede usar squared de la misma manera que otras variables de JSX. Si agregó { squared } a JSX en otro lugar, se representaría la colección de elementos div con los números actualizados.