Listas y Keys en react

Vamos a ver Listas y Keys en React, algo muy importante cuando trabajás con arrays para renderizar contenido dinámico.

Prerrequisitos

• Instalación react se explica a detalle como instar y configurar un entono de trabajo para react.
• Estructura de un proyecto React    Conocer los archivos principales, index.js, App.js, carpetas, etc.
• JSX  Sintaxis básica, reglas JSX, expresiones, fragmentos (<> </>).
• En el post de componentes en React se dan los primeros pasos para crear un componente.

Crear un proyecto de prueba

Antes de explicar los Hooks, vamos a crear un proyecto react para realizar los ejercicios que explicaremos a continuación:

npm create vite@latest

Donde seleccionamos:

> npx
> create-vite
|
o  Project name:
|  practicas-react
|
o  Select a framework:
|  React
|
o  Select a variant:
|  TypeScript

Por ultimo, ejecutamos

cd practicas-react
npm install
npm run dev

Vamos a crear un directorio llamado components en el directorio src donde crearemos los componentes de los siguientes ejemplos:

🔹 ¿Qué son las listas en React?

En React, una lista es simplemente un conjunto de elementos que querés mostrar en la interfaz. Generalmente, esas listas provienen de un array de datos.

📌 Ejemplo básico de lista:

export default function ListaFrutas() {
  const frutas = ["Manzana", "Banana", "Naranja"];
  return (
    <div>
      <ul>
        {" "}
        {frutas.map((fruta) => (
          <li>{fruta}</li>
        ))}{" "}
      </ul>
    </div>
  );
}

👆 Esto funciona, pero React mostrará una advertencia: cada elemento debe tener una key única.

🔑 ¿Qué son las Keys?

Las keys ayudan a React a identificar qué elementos han cambiado, se han agregado o eliminado. Es crucial cuando React hace el "re-render" de componentes.

Las keys deben ser únicas entre los elementos hermanos.

🔁 Corregimos el ejemplo con keys:

export default function ListaFrutas() {
  const frutas = ["Manzana", "Banana", "Naranja"];
  return (
    <div>
      <ul>
        {" "}
        {frutas.map((fruta, index) => (
          <li key={index}>{fruta}</li>
        ))}{" "}
      </ul>
    </div>
  );
}

🟡 Nota: usar el índice como key es aceptable si los elementos no cambian de orden. Pero si la lista se modifica (agrega, elimina, reordena), es mejor una key única basada en el contenido.

🧪 Ejemplo con objetos y keys únicas:

export default function ListaFrutas() {
  const tareas = [
    { id: 1, texto: "Estudiar React" },
    { id: 2, texto: "Hacer ejercicio" },
    { id: 3, texto: "Leer un libro" },
  ];
  return (
    <div>
      <ul>
        {" "}
        {tareas.map((tarea) => (
          <li key={tarea.id}>{tarea.texto}</li>
        ))}{" "}
      </ul>
    </div>
  );
}

✅ En este caso usamos tarea.id como key, lo cual es lo ideal si tenés IDs únicos.

🚨 Qué evitar

❌ No usar elementos sin key:

{items.map(item => <li>{item.name}</li>)} // Mal

❌ No usar índices si el orden puede cambiar:

{items.map((item, index) => <li key={index}>{item.name}</li>)} // Cuidado