Listas y Claves en React

Introducción

En React, a menudo necesitarás mostrar múltiples componentes similares a partir de una colección de datos. Puedes usar métodos de array de JavaScript, como map(), para manipular un array de datos y transformarlo en un array de elementos JSX.

Una "key" es un atributo de cadena especial que debes incluir al crear listas de elementos. Las keys ayudan a React a identificar qué elementos han cambiado, se han añadido o se han eliminado. Esto permite a React actualizar la interfaz de usuario de manera eficiente.

En este laboratorio, aprenderás a tomar un array de datos, transformarlo en una lista de componentes y renderizarlo, al mismo tiempo que comprendes el papel fundamental del prop key.

Crear un array de elementos en el componente

En este paso, comenzarás definiendo los datos que deseas mostrar como una lista. En la mayoría de las aplicaciones, estos datos provendrían de una API o una base de datos, pero para este laboratorio, definiremos un array simple directamente dentro de nuestro componente.

Primero, asegúrate de estar en el directorio correcto. Tu aplicación React my-app ha sido creada en el directorio /home/labex/project.

Usando el explorador de archivos en el lado izquierdo del WebIDE, abre el archivo my-app/src/App.jsx.

Dentro de la función del componente App, antes de la declaración return, define una constante llamada products que será un array de cadenas.

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  return (
    <>
      <h1>My Product List</h1>
    </>
  );
}

export default App;

En este punto, el array está definido pero aún no se ha renderizado. El siguiente paso te mostrará cómo mostrar estos datos.

Mapear el array a elementos JSX con el método map

En este paso, utilizarás el método map() de JavaScript para transformar tu array products en una lista de elementos JSX. El método map() crea un nuevo array llamando a una función en cada elemento del array original.

Mapearemos cada cadena de producto a un elemento <li> (elemento de lista).

Modifica tu archivo src/App.jsx. Dentro de la declaración return, incrusta la lógica de mapeo entre llaves {}.

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  const listItems = products.map((product) => <li>{product}</li>);

  return (
    <>
      <h1>My Product List</h1>
      {listItems}
    </>
  );
}

export default App;

Ahora, instalemos las dependencias del proyecto e iniciemos el servidor de desarrollo para ver el resultado.

Abre una nueva terminal en el WebIDE. Primero, navega a tu directorio de proyecto:

cd my-app

A continuación, instala las dependencias:

npm install

Finalmente, inicia el servidor de desarrollo. Las banderas --host y --port son necesarias para hacer que la aplicación sea accesible dentro del entorno de LabEx.

npm run dev -- --host 0.0.0.0 --port 8080

Después de que el servidor se inicie, cambia a la pestaña Web 8080 en tu interfaz de LabEx. Deberías ver tu lista de productos. Sin embargo, si abres la consola de desarrollador del navegador (Clic derecho -> Inspeccionar -> Consola), verás una advertencia: Warning: Each child in a list should have a unique "key" prop. Arreglaremos esto en el siguiente paso.

Asignar la prop key única a cada elemento de la lista

En este paso, corregirás la advertencia de la consola proporcionando una key única a cada elemento de la lista. Las claves son cruciales para que React rastree la identidad de cada elemento, lo que ayuda a volver a renderizar la lista de manera eficiente cuando los datos cambian.

La mejor manera de elegir una clave es usar una cadena que identifique de forma única un elemento de la lista entre sus hermanos. La mayoría de las veces, usarías los IDs de tus datos.

Modifiquemos nuestros datos para que sean un array de objetos, donde cada objeto tenga un id único. Actualiza src/App.jsx de la siguiente manera. Usaremos el id de cada producto como su clave.

function App() {
  const products = [
    { id: "p1", name: "Laptop" },
    { id: "p2", name: "Mouse" },
    { id: "p3", name: "Keyboard" },
    { id: "p4", name: "Monitor" }
  ];

  const listItems = products.map((product) => (
    <li key={product.id}>{product.name}</li>
  ));

  return (
    <>
      <h1>My Product List</h1>
      {listItems}
    </>
  );
}

export default App;

Observa la prop key={product.id} añadida al elemento <li>. La clave es una prop especial que React utiliza internamente y no se pasa a tu componente.

Después de guardar el archivo, vuelve a comprobar la pestaña Web 8080 y la consola del desarrollador. La lista debería renderizarse como antes, pero la advertencia sobre las claves faltantes habrá desaparecido.

Usar el índice como key si no hay un id único disponible

En este paso, aprenderás a manejar situaciones en las que tus datos no tienen IDs estables y únicos. En tales casos, puedes usar el índice del elemento en el array como último recurso.

La función map() proporciona el índice del elemento actual como un segundo argumento opcional. Puedes usar este índice para la clave.

Revertamos nuestro array products a un simple array de cadenas y usemos el índice como clave. Modifica src/App.jsx:

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  const listItems = products.map((product, index) => (
    <li key={index}>{product}</li>
  ));

  return (
    <>
      <h1>My Product List</h1>
      {listItems}
    </>
  );
}

export default App;

Nota Importante: No se recomienda usar el índice como clave si el orden de los elementos puede cambiar. Esto puede afectar negativamente el rendimiento y causar problemas con el estado del componente. Si ordenas, agregas o eliminas elementos de la lista, los índices cambiarán, lo que puede confundir el algoritmo de renderizado de React. Úsalo solo si la lista es estática y nunca se reordenará.

Renderizar la lista mapeada dentro de una etiqueta ul u ol

En este paso, envolverás tus elementos de lista en una etiqueta <ul> (lista desordenada) o <ol> (lista ordenada). Esto es importante para crear HTML semánticamente correcto, lo cual es bueno para la accesibilidad y el SEO.

Actualmente, estamos renderizando una serie de elementos <li> directamente dentro de un fragmento (<>...</>). Vamos a envolver nuestra variable listItems en una etiqueta <ul> para crear una lista desordenada adecuada.

Actualiza tu src/App.jsx con el código final:

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  const listItems = products.map((product, index) => (
    <li key={index}>{product}</li>
  ));

  return (
    <>
      <h1>My Product List</h1>
      <ul>{listItems}</ul>
    </>
  );
}

export default App;

Ahora, vuelve a la pestaña Web 8080. Verás que tu lista ahora está formateada correctamente con puntos de viñeta, como se espera de un elemento <ul> HTML estándar. Has renderizado con éxito una lista dinámica en React con claves correctas y HTML semántico.

Resumen

¡Felicidades por completar el laboratorio!

En este laboratorio, has aprendido los conceptos fundamentales de renderizado de listas en React. Has practicado:

• Definir un array de datos dentro de un componente.
• Usar el método map() para transformar un array de datos en un array de elementos JSX.
• La importancia crítica de la prop key para los elementos de lista, para ayudar a React con un renderizado eficiente.
• Cómo usar IDs estables y únicos de tus datos como claves.
• Cómo usar el índice del array como clave como último recurso y los posibles inconvenientes de hacerlo.
• Envolver tus elementos de lista en <ul> o <ol> para un HTML semántico.

Estas habilidades son esenciales para construir aplicaciones dinámicas y basadas en datos con React.