Renderizado de listas

Renderizar datos desde arrays

Digamos que tienes una lista de contenido.

<ul>
  <li>Creola Katherine Johnson: matemática</li>
  <li>Mario José Molina-Pasquel Henríquez: químico</li>
  <li>Mohammad Abdus Salam: físico</li>
  <li>Percy Lavon Julian: químico</li>
  <li>Subrahmanyan Chandrasekhar: astrofísico</li>
</ul>

La única diferencia entre esos elementos de la lista es su contenido, sus datos. A menudo necesitarás mostrar muchas instancias del mismo componente usando diferentes datos cuando construyas interfaces: desde listas de comentarios a galerías de fotos de perfiles. En estas situaciones, puedes guardar estos datos en objetos de JavaScript y arrays, y usar métodos como map() y filter() para renderizar listas de componentes desde ellos.

Aquí hay un corto ejemplo de como generar una lista de elementos de un array:

1. Mueve los datos en un array:

const people = [
  'Creola Katherine Johnson: matemática',
  'Mario José Molina-Pasquel Henríquez: químico',
  'Mohammad Abdus Salam: físico',
  'Percy Lavon Julian: químico',
  'Subrahmanyan Chandrasekhar: astrofísico'
];

2. Mapea los miembros de people en un nuevo array de nodos JSX, listItems:

const listItems = people.map(person => <li>{person}</li>);

3. Devuelve listItems desde tu componente envuelto en un <ul>:

return <ul>{listItems}</ul>;

Aquí está el resultado:

Date cuenta que el sandbox anterior muestra un error por consola:

Aprenderás como arreglar este error más adelante en esta página. Antes de que lleguemos a eso, vamos a añadir algo de estructura a tus datos.

Filtrar arrays de objetos

Estos datos pueden ser estructurados incluso más.

const people = [{
  id: 0,
  name: 'Creola Katherine Johnson',
  profession: 'matemática',
}, {
  id: 1,
  name: 'Mario José Molina-Pasquel Henríquez',
  profession: 'químico',
}, {
  id: 2,
  name: 'Mohammad Abdus Salam',
  profession: 'físico',
}, {
  name: 'Percy Lavon Julian',
  profession: 'químico',  
}, {
  name: 'Subrahmanyan Chandrasekhar',
  profession: 'astrofísico',
}];

Digamos que quieres una manera de mostrar solo las personas cuya profesión sea 'químico'. Puedes usar el método filter() de JavaScript para devolver solo esas personas. Este método coge un array de objetos, los pasa por un «test» (una función que devuelve true o false), y devuelve un nuevo array de solo esos objetos que han pasado el test (que han devuelto true).

Tú solo quieres los objetos donde profession es 'químico'. La función «test» para esto se ve como (person) => person.profession === 'químico'. Aquí está cómo juntarlo:

1. Crea un nuevo array solo de personas que sean «químicos», chemists, llamando al método filter() en people filtrando por person.profession === 'químico':

const chemists = people.filter(person =>
  person.profession === 'químico'
);

2. Ahora mapea sobre chemists:

const listItems = chemists.map(person =>
  <li>
     <img
       src={getImageUrl(person)}
       alt={person.name}
     />
     <p>
       <b>{person.name}:</b>
       {' ' + person.profession + ' '}
       conocido/a por {person.accomplishment}
     </p>
  </li>
);

3. Por último, devuelve el listItems de tu componente:

return <ul>{listItems}</ul>;

const listItems = chemists.map(person =>
  <li>...</li> // Implicit return!
);

const listItems = chemists.map(person => { // Curly brace
  return <li>...</li>;
});

Mantener los elementos de una lista en orden con key

Fíjate que todos los sandboxes anteriores mostraban un error en la consola:

Tienes que darle a cada elemento del array una key (una cadena de texto o un número) que lo identifique de manera única entre otros elementos del array:

<li key={person.id}>...</li>

Las keys le indican a React que objeto del array corresponde a cada componente, para así poder emparejarlo más tarde. Esto se vuelve más importante si los objetos de tus arrays se pueden mover (p. ej. debido a un ordenamiento), insertar, o eliminar. Una key bien escogida ayuda a React a entender lo que ha sucedido exactamente, y hacer las correctas actualizaciones en el árbol del DOM.

En vez de generar keys sobre la marcha, deberías incluirlas en tus datos:

import { Fragment } from 'react';

// ...

const listItems = people.map(person =>
  <Fragment key={person.id}>
    <h1>{person.name}</h1>
    <p>{person.bio}</p>
  </Fragment>
);

Dónde conseguir tu key

Distintas fuentes de datos dan diferentes fuentes de keys:

• Datos de una base de datos: Si tus datos vienen de una base de datos, puedes usar las keys/ID de la base de datos, que son únicas por naturaleza.
• Datos generados localmente: Si tus datos son generados y persistidos localmente (p. ej. notas en una app de tomar notas), usa un contador incremental, crypto.randomUUID() o un paquete como uuid cuando este creando objetos.

Reglas de las keys

• Las keys tienen que ser únicas entre elementos hermanos. Sin embargo, está bien usar las mismas keys para nodos JSX en arrays diferentes.
• Las keys no tienen que cambiar o ¡eso quitará su propósito! No las generes mientras renderizas.

¿Por qué React necesita keys?

Imagina que los archivos de tu escritorio no tuvieran nombres. En vez de eso, tu te referirías a ellos por su orden — el primer archivo, el segundo, y así. Podrías acostumbrarte a ello, pero una vez borres un archivo, se volvería algo confuso. El segundo archivo se convertiría en el primero, el tercer archivo se convertiría en el segundo, y así.

Los nombres de archivos en una carpeta y las keys JSX en un array tienen un propósito similar. Nos permiten identificar un objeto de manera única entre sus hermanos. Una key bien escogida da más información aparte de la posición en el array. incluso si la posición cambia devido a un reordenamiento, la key permite a React identificar al elemento a lo largo de su ciclo de vida.