Renderizar listas

Renderizar Listas en React

En React, la renderización de listas es una tarea común cuando necesitas mostrar múltiples elementos dinámicamente, como datos de un array. React usa el método .map() de JavaScript para iterar sobre arrays y crear un conjunto de elementos JSX que se renderizan en la interfaz.

Pasos para Renderizar Listas

1. Tener un array de datos: Puedes usar arrays estáticos o dinámicos (por ejemplo, obtenidos de una API).
2. Usar el método .map(): Transforma los elementos del array en elementos JSX.
3. Asignar una key única a cada elemento: React utiliza las claves (key) para identificar de manera única cada elemento y optimizar la renderización.

Ejemplo Básico

Código:

import React from "react";

const App = () => {
  const frutas = ["Manzana", "Plátano", "Naranja", "Uva"];

  return (
    <div>
      <h1>Lista de Frutas</h1>
      <ul>
        {frutas.map((fruta, index) => (
          <li key={index}>{fruta}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Explicación:

• frutas es un array con nombres de frutas.
• El método .map() transforma cada fruta en un elemento <li>.
• Se asigna key={index} para dar a cada elemento una clave única basada en el índice del array.

Ejemplo con Objetos

Código:

import React from "react";

const App = () => {
  const usuarios = [
    { id: 1, nombre: "Juan", edad: 25 },
    { id: 2, nombre: "Ana", edad: 30 },
    { id: 3, nombre: "Luis", edad: 22 },
  ];

  return (
    <div>
      <h1>Lista de Usuarios</h1>
      <ul>
        {usuarios.map((usuario) => (
          <li key={usuario.id}>
            {usuario.nombre} - {usuario.edad} años
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Explicación:

• usuarios es un array de objetos.
• Cada usuario se representa con un elemento <li> que combina sus propiedades.
• Se usa key={usuario.id} para evitar colisiones al modificar la lista.

Ejemplo con Componentes

Puedes renderizar una lista usando un componente hijo.

Código:

import React from "react";

const Usuario = ({ nombre, edad }) => {
  return (
    <div>
      <h3>{nombre}</h3>
      <p>Edad: {edad}</p>
    </div>
  );
};

const App = () => {
  const usuarios = [
    { id: 1, nombre: "Juan", edad: 25 },
    { id: 2, nombre: "Ana", edad: 30 },
    { id: 3, nombre: "Luis", edad: 22 },
  ];

  return (
    <div>
      <h1>Lista de Usuarios</h1>
      {usuarios.map((usuario) => (
        <Usuario key={usuario.id} nombre={usuario.nombre} edad={usuario.edad} />
      ))}
    </div>
  );
};

export default App;

Explicación:

• Usuario es un componente que recibe nombre y edad como props.
• La lista se renderiza llamando al componente Usuario para cada elemento del array.

Errores Comunes

1. Falta de clave (key) o clave no única:
   • Si React no encuentra claves únicas, puede provocar comportamientos inesperados.
   • Solución: Usa valores únicos del objeto, como id.
2. Modificación directa del array original:
   • React espera que los datos sean inmutables.
   • Solución: Usa métodos que no muten el array, como .map() o .filter().
3. Renderizar valores nulos o indefinidos:
   • Si un elemento del array es null o undefined, React no lo renderiza.
   • Solución: Asegúrate de que los datos estén completos antes de renderizar.

Buenas Prácticas

• Usar claves únicas: Las claves ayudan a React a identificar qué elementos han cambiado.
• Mantener los datos separados de la lógica de renderización: Define los datos en un estado o variable y usa .map() para transformarlos.
• Reutilizar componentes: Divide la lógica en componentes reutilizables cuando sea posible.

https://www.w3schools.com/react/react_lists.asp

https://fullstackopen.com/es/part2/renderizando_una_coleccion_modulos#renderizando-colecciones