25. Arrays en react

 

25. Arrays en React

En este tutorial aprenderemos a recorrer y mostrar arrays en React usando el método .map(). Usaremos un ejemplo con un componente Card que mostrará una lista de Pokémon.

📁 Estructura del Proyecto

text

REACTINTENSIVO/

├── node_modules

├── public

│   ├── favicon.ico

│   ├── index.html

│   └── ...

└── src

    ├── components

    │   ├── Card.jsx

    │   └── card.css

    ├── index.jsx

    ├── index.css

    └── ...






🚀 Paso 1: Crear el Array de Datos

En nuestro componente Card.jsx, vamos a crear un array de objetos con datos de Pokémon:

jsx

// Card.jsx

import './card.css';


const pokemon = [

  {

    id: 1,

    nombre: "pikachu",

    imagen: "https://i.ibb.co/BszMDBT/facce6ffale95f3ec5ea68a6721009ad.png"

  },

  {

    id: 2,

    nombre: "charizard",

    imagen: "https://i.ibb.co/8YBV3Zb/1200px-Charizard-SSBU.png"

  }

];

🔄 Paso 2: Recorrer el Array con .map()

En React, usamos el método .map() para recorrer arrays y renderizar elementos:

jsx

export function Card() {

  return pokemon.map((item, index) => {

    return (

      <div className="card" key={index}>

        <h1>{item.nombre}</h1>

        <img className="image" src={item.imagen} alt={item.nombre} />

      </div>

    );

  });

}


⚠️ Importante: La Prop key

React necesita un identificador único (key) para cada elemento cuando mapeamos arrays. Podemos usar:

  • index: La posición en el array (0, 1, 2...)

  • id: Un identificador único de la base de datos (recomendado)

jsx

// Usando el id (mejor práctica)

<div className="card" key={item.id}>

🎨 Paso 3: Agregar Estilos CSS

En card.css:

css

.card {

  border: 1px solid #ccc;

  border-radius: 8px;

  padding: 16px;

  margin: 10px;

  text-align: center;

}


.image {

  width: 100px;

  height: auto;

}

📝 Explicación Detallada

1. ¿Por qué .map() y no for?

  • .map() es más declarativo y funcional

  • Retorna directamente un nuevo array de elementos React

  • Se integra mejor con JSX

2. Sintaxis de .map() en React

jsx

{array.map((item, index) => (

  <Componente key={index} dato={item} />

))}

3. El Error Común: key Prop

Si ves este error en consola:

text

Warning: Each child in a list should have a unique "key" prop.

Significa que debes agregar la prop key a cada elemento.

4. Actualización en Tiempo Real

  • Para ver cambios sin errores en consola:

    1. Cierra la consola del navegador

    2. Actualiza la página (F5)

    3. Vuelve a abrir la consola

💡 Buenas Prácticas

  1. Siempre usar key: Ya sea index o id

  2. Extraer a componentes: Para arrays complejos

  3. Manejar imágenes: Usar alt para accesibilidad

  4. Formatear código: Usar Prettier o formateadores automáticos

🔧 Solución de Problemas


Error: "Invalid shorthand property initializer"

jsx

// ❌ INCORRECTO

const pokemon = [

  id = 1,  // Error aquí

  nombre = "pikachu"

];


// ✅ CORRECTO

const pokemon = [

  {

    id: 1,

    nombre: "pikachu"

  }

];

Error: No se muestran las imágenes

  • Verifica que las URLs sean correctas

  • Asegúrate de que las imágenes sean públicas

  • Revisa la consola del navegador para errores 404

📊 Resultado Final

Al completar estos pasos, tendrás:

  • Una lista de Pokémon mostrada con .map()

  • Imágenes con estilos personalizados

  • Código limpio y sin errores en consola

  • Un componente reutilizable

🎯 Conclusión

Recorrer arrays en React con .map() es fundamental para:

  • Mostrar listas de datos dinámicas

  • Crear interfaces interactivas

  • Trabajar con datos de APIs o bases de datos

Recuerda siempre incluir la prop key y mantener tu código bien estructurado para evitar errores comunes.

¡Ahora puedes aplicar este conocimiento a tu proyecto Pokédex o cualquier otra aplicación Reac






















Arrays en React: Explicación con Ejemplos

Los arrays son fundamentales en React para renderizar listas dinámicas de elementos. Te explico los conceptos clave:

1. Renderizar Arrays con .map()

El método más común es usar .map() para transformar un array de datos en elementos React:

function ListaDeFrutas() {

  const frutas = ['Manzana', 'Banana', 'Naranja', 'Uva'];

  

  return (

    <ul>

      {frutas.map((fruta, index) => (

        <li key={index}>{fruta}</li>

      ))}

    </ul>

  );

}

2. La Propiedad key

React necesita una key única para identificar cada elemento en la lista:

function ListaDePersonas() {

  const personas = [

    { id: 1, nombre: 'Ana', edad: 25 },

    { id: 2, nombre: 'Carlos', edad: 30 },

    { id: 3, nombre: 'Luis', edad: 28 }

  ];

  

  return (

    <ul>

      {personas.map(persona => (

        <li key={persona.id}>

          {persona.nombre} - {persona.edad} años

        </li>

      ))}

    </ul>

  );}

Regla importante: Usa un identificador único (como id) en lugar del índice cuando sea posible, especialmente si la lista puede cambiar (añadir, eliminar, reordenar elementos).

3. Arrays de Componentes

Puedes crear arrays de componentes React:

jsx

function ListaDeTareas() {

  const tareas = [

    { id: 1, texto: 'Hacer la compra', completada: false },

    { id: 2, texto: 'Estudiar React', completada: true },

    { id: 3, texto: 'Llamar al médico', completada: false }

  ];


  const componentesTareas = tareas.map(tarea => (

    <Tarea 

      key={tarea.id}

      texto={tarea.texto}

      completada={tarea.completada}

    />

  ));


  return <div>{componentesTareas}</div>;

}


function Tarea({ texto, completada }) {

  return (

    <div style={{ 

      textDecoration: completada ? 'line-through' : 'none',

      margin: '10px 0'

    }}>

      {texto}

    </div>

  );

}


4. Filtrar Arrays

Combinar .filter() con .map() es muy común:

jsx

function TareasCompletadas() {

  const tareas = [

    { id: 1, texto: 'Hacer la compra', completada: false },

    { id: 2, texto: 'Estudiar React', completada: true },

    { id: 3, texto: 'Llamar al médico', completada: false },

    { id: 4, texto: 'Pagar facturas', completada: true }

  ];


  const tareasCompletadas = tareas

    .filter(tarea => tarea.completada)

    .map(tarea => (

      <li key={tarea.id}>{tarea.texto}</li>

    ));


  return (

    <div>

      <h3>Tareas Completadas ({tareasCompletadas.length})</h3>

      <ul>{tareasCompletadas}</ul>

    </div>

  );

}






5. Estado con Arrays (useState)

Cuando trabajas con arrays en el estado, recuerda no mutarlos directamente:

import { useState } from 'react';


function GestorDeLista() {

  const [elementos, setElementos] = useState(['Elemento 1', 'Elemento 2']);

  const [nuevoElemento, setNuevoElemento] = useState('');


  const agregarElemento = () => {

    if (nuevoElemento.trim() === '') return;

    // Forma CORRECTA: crear un nuevo array

    setElementos([...elementos, nuevoElemento]);

    // Forma INCORRECTA: elementos.push(nuevoElemento);

    setNuevoElemento('');

  };


  const eliminarElemento = (index) => {

    // Filtrar para eliminar un elemento

    const nuevosElementos = elementos.filter((_, i) => i !== index);

    setElementos(nuevosElementos);

  };


  return (

    <div>

      <input

        type="text"

        value={nuevoElemento}

        onChange={(e) => setNuevoElemento(e.target.value)}

        placeholder="Nuevo elemento"

      />

      <button onClick={agregarElemento}>Agregar</button>

      <ul>

        {elementos.map((elemento, index) => (

          <li key={index}>

            {elemento}

            <button onClick={() => eliminarElemento(index)}>Eliminar</button>

          </li>

        ))}

      </ul>

    </div>

  );}

6. Ejemplo Completo: Carrito de Compras

jsx

import { useState } from 'react';


function CarritoDeCompras() {

  const [productos, setProductos] = useState([

    { id: 1, nombre: 'Camiseta', precio: 20, cantidad: 1 },

    { id: 2, nombre: 'Pantalón', precio: 35, cantidad: 2 },

    { id: 3, nombre: 'Zapatos', precio: 50, cantidad: 1 }

  ]);


  const incrementarCantidad = (id) => {

    const nuevosProductos = productos.map(producto => {

      if (producto.id === id) {

        return { ...producto, cantidad: producto.cantidad + 1 };

      }

      return producto;

    });

    setProductos(nuevosProductos);

  };


  const eliminarProducto = (id) => {

    const nuevosProductos = productos.filter(producto => producto.id !== id);

    setProductos(nuevosProductos);

  };


  const total = productos.reduce((sum, producto) => 

    sum + (producto.precio * producto.cantidad), 0

  );


  return (

    <div>

      <h2>Carrito de Compras</h2>

      

      {productos.length === 0 ? (

        <p>El carrito está vacío</p>

      ) : (

        <>

          {productos.map(producto => (

            <div key={producto.id} style={{

              border: '1px solid #ddd',

              padding: '10px',

              margin: '10px 0',

              display: 'flex',

              justifyContent: 'space-between',

              alignItems: 'center'

            }}>

              <div>

                <h3>{producto.nombre}</h3>

                <p>Precio: ${producto.precio}</p>

                <p>Cantidad: {producto.cantidad}</p>

                <p>Subtotal: ${producto.precio * producto.cantidad}</p>

              </div>

              <div>

                <button onClick={() => incrementarCantidad(producto.id)}>

                  +

                </button>

                <button onClick={() => eliminarProducto(producto.id)}>

                  Eliminar

                </button>

              </div>

            </div>

          ))}

          

          <h3>Total: ${total}</h3>

        </>

      )}

    </div>

  );

}

Buenas Prácticas

  1. Siempre usa key para elementos en listas

  2. Evita usar el índice como key si la lista puede cambiar

  3. No modifiques arrays directamente cuando trabajes con estado

  4. Usa métodos inmutables como .map(), .filter(), y el spread operator [...array]

  5. Separa la lógica de renderizado cuando sea compleja

Los arrays en React son poderosos porque te permiten crear interfaces dinámicas que responden a cambios en los datos de manera eficiente

Comentarios

Publicar un comentario

Entradas más populares de este blog

11. Creando un proyecto react con create-react-app

    ¡Vamos a crearnos ahora nuestros proyectos de realidad! Vamos a ver dos formas. La primera va a ser con el clásico  Create React App , que, por cierto, tiene una gran ventaja: encontrarás muchísimos proyectos inicializados con esta herramienta. Es decir, podrás acceder a bastantes códigos fuente que usan este tipo de creación. Esta es la forma que también  React nos recomienda  para arrancar. Podemos verlo en su documentación oficial, donde se explica paso a paso cómo crear un proyecto con esta herramienta. Paso a paso: Creamos una carpeta raíz  para almacenar todos nuestros proyectos. Yo la llamé "React intensivo". Abrimos  Visual Studio Code  (nueva ventana) y arrastramos la carpeta dentro. Así usamos la interfaz gráfica, aunque también se puede hacer directamente por consola. Una vez dentro de la carpeta, abrimos una  nueva terminal  en VS Code. Según la documentación de React, el comando es: bash npx create-react-app < nombre-...
Leer más

29. useEffect

  Tutorial: 29. useEffect en React Introducción a useEffect useEffect es uno de los Hooks más importantes en React que nos permite ejecutar efectos secundarios en nuestros componentes funcionales. Los efectos secundarios son operaciones que pueden incluir peticiones a APIs, suscripciones, manipulación del DOM, etc. 1. Sintaxis Básica La sintaxis básica de useEffect es: javascript useEffect (() => {    // Código a ejecutar }, []) // Array de dependencias Ejemplo visual de la sintaxis: text useEffect(()=>{},[]) 2. Ejemplo Práctico: Sistema de Likes Vamos a construir un componente de likes para entender cómo funciona useEffect : javascript import { useState , useEffect } from "react" ; export function Prueba () {    const [ likes , setLikes ] = useState ( 0 );       const darLike = () => {      setLikes ( likes + 1 );    };       // useEffect ejecutando darLike un...
Leer más

38. 4 Routers

  Tutorial 38.4: Implementando Router en nuestra App de Películas Introducción a React Router Ahora que tenemos nuestra aplicación mostrando películas, necesitamos implementar navegación entre diferentes vistas. Vamos a crear rutas para: Ver la lista de películas (página principal) Ver el detalle de cada película Otras vistas futuras (búsqueda, favoritos, etc.) Paso 1: Estructura de carpetas Primero, vamos a organizar nuestro proyecto con una estructura más profesional: text src/ ├── assets/ ├── components/ │   ├── ContextMovieCard.jsx │   └── MovieCard.jsx ├── data/ ├── pages/ │   └── LandingPage.jsx ├── routers/ │   └── routes.jsx ├── App.css ├── App.jsx ├── index.css └── main.jsx Paso 2: Instalar React Router DOM Abrimos una terminal en nuestro proyecto 1-peliculas y ejecutamos: bash cd 1 -peliculas yarn add react-router-dom O con npm: bash npm install react-router-dom Paso 3: Crear componentes básicos MovieCard.jsx (Componente individual de película) j...
Leer más