6.16-25. Arrays en react

Trabajando con Arrays en React: Guía Práctica

En React, los arrays son una estructura de datos fundamental que utilizamos constantemente, ya sea para renderizar listas, manejar estados complejos o procesar información. En este post, exploraremos cómo trabajar eficientemente con arrays en React.

1. Renderizar Listas con map()

El método map() es esencial para transformar arrays en elementos de React.

jsx- Renderizar Listas con map()

import React from 'react';

const ListaDeUsuarios = () => {
  const usuarios = ['Ana', 'Carlos', 'Luisa', 'Pedro'];

  return (
    <ul>
      {usuarios.map((usuario, index) => (
        <li key={index}>{usuario}</li>
      ))}
    </ul>
  );
};

export default ListaDeUsuarios;

🔹 Importante: Siempre usa una key única (preferiblemente un id en lugar del índice).

2. Actualizar Arrays en el Estado

Cuando trabajamos con el estado (useState), debemos evitar mutar arrays directamente. En su lugar, usamos métodos que retornan un nuevo array.

Añadir un elemento

jsx-Añadir un elemento

const [tareas, setTareas] = useState(['Tarea 1', 'Tarea 2']);

const agregarTarea = () => {
  setTareas([...tareas, 'Nueva Tarea']);
};

Eliminar un elemento

jsx-Eliminar un elemento

const eliminarTarea = (index) => {
  setTareas(tareas.filter((_, i) => i !== index));
};

Actualizar un elemento

jsx-Actualizar un elemento

const actualizarTarea = (index, nuevoTexto) => {
  setTareas(tareas.map((tarea, i) => 
    i === index ? nuevoTexto : tarea
  ));
};

3. Ordenar y Filtrar Arrays

Podemos aplicar métodos como sort() y filter() antes de renderizar.

jsx

const numeros = [3, 1, 4, 2];
const numerosOrdenados = [...numeros].sort((a, b) => a - b);

const mayoresQueDos = numeros.filter(num => num > 2);

4. Arrays de Objetos

Es común trabajar con arrays de objetos, como datos de una API.

jsx-Arrays de Objetos

const [productos, setProductos] = useState([
  { id: 1, nombre: 'Laptop', precio: 1000 },
  { id: 2, nombre: 'Teléfono', precio: 500 },
]);

return (
  <ul>
    {productos.map((producto) => (
      <li key={producto.id}>
        {producto.nombre} - ${producto.precio}
      </li>
    ))}
  </ul>
);

Conclusión

Dominar el manejo de arrays en React te permitirá crear aplicaciones más dinámicas y eficientes. Recuerda siempre:

✅ Usar map() para renderizar listas.
✅ Evitar mutaciones directas en el estado.
✅ Aprovechar métodos como filter, sort y reduce.

agregar nuevas tareas y mostrarlas en una lista:

jsx

import React, { useState } from 'react';

const ListaDeTareas = () => {
  // Estado inicial con dos tareas
  const [tareas, setTareas] = useState(['Tarea 1', 'Tarea 2']);
  // Estado para el input de nueva tarea
  const [nuevaTarea, setNuevaTarea] = useState('');

  // Función para agregar una nueva tarea
  const agregarTarea = () => {
    if (nuevaTarea.trim() !== '') {  // Evitar agregar tareas vacías
      setTareas([...tareas, nuevaTarea]);
      setNuevaTarea('');  // Limpiar el input después de agregar
    }
  };

  // Función para manejar la tecla Enter
  const manejarKeyPress = (e) => {
    if (e.key === 'Enter') {
      agregarTarea();
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '400px', margin: '0 auto' }}>
      <h2>Lista de Tareas</h2>
      <div style={{ marginBottom: '10px' }}>
        <input
          type="text"
          value={nuevaTarea}
          onChange={(e) => setNuevaTarea(e.target.value)}
          onKeyPress={manejarKeyPress}
          placeholder="Escribe una nueva tarea"
          style={{ padding: '8px', width: '70%', marginRight: '10px' }}
        />
        <button 
          onClick={agregarTarea}
          style={{ padding: '8px 12px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '4px' }}
        >
          Agregar
        </button>
      </div>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {tareas.map((tarea, index) => (
          <li 
            key={index} 
            style={{ padding: '8px', margin: '5px 0', backgroundColor: '#f4f4f4', borderRadius: '4px' }}
          >
            {tarea}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ListaDeTareas;

value={nuevaTarea}

• Esto es lo que hace que el input sea un componente controlado en React.

• El valor que muestra el input siempre será exactamente el valor que contiene el estado nuevaTarea.

• Inicialmente es una cadena vacía ('') porque así lo definiste en el useState.

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

• Cada vez que escribes algo en el input, se dispara el evento onChange.

• e.target.value contiene el último valor escrito en el input.

• setNuevaTarea() actualiza el estado con ese nuevo valor.

El flujo completo es:

1. Escribes "Hola" en el input:

   • React detecta el cambio y ejecuta setNuevaTarea("H") (primer caracter)

   • El estado se actualiza a "H"

   • El input se re-renderiza mostrando "H" (porque value={nuevaTarea} ahora es "H")

2. Sigues escribiendo:

   • Se repite el proceso para cada letra ("Ho", "Hol", "Hola")

3. Cuando presionas Enter o el botón:

   • Se toma el valor actual de nuevaTarea (ej. "Hola")

   • Se agrega al array de tareas

   • setNuevaTarea('') vacía el input

Características del ejemplo:

1. Estado inicial: El array tareas comienza con dos elementos.

2. Input controlado: El campo de texto está vinculado al estado nuevaTarea.

3. Validación: No se agregan tareas vacías.

4. Tecla Enter: La función manejarKeyPress permite agregar tareas presionando Enter.

5. Estilos básicos: Incluye estilos en línea para que se vea presentable.

6. Renderizado dinámico: Las tareas se muestran en una lista usando map().

¿Cómo usarlo?

• Copia este código en un componente React.

• Importa useState desde 'react'.

• El componente se puede usar directamente en tu aplicación.

Este ejemplo es minimalista pero cubre todas las bases: manejo de estado, actualización de arrays, y renderizado dinámico. ¿Necesitas que agregue más funcionalidades como eliminar tareas o marcarlas como completadas? 😊

Cómo Recorrer Arrays en React - Método Map

Hoy vamos a aprender a recorrer arreglos en React usando nuestro componente Cart. ¡Manos a la obra!

🔄 Limpieza inicial del componente

Primero, limpiamos nuestro componente Cart:

jsx

// Eliminamos estados que no usaremos
// Limpiamos el return

🏗️ Construyendo nuestro array de Pokémon

Vamos a crear un array simple con datos de Pokémon:

jsx-Construyendo nuestro array de Pokémon

const pokemons = [
  {
    id: 1,
    name: "Pikachu",
    image: "https://ejemplo.com/pikachu.png"
  },
  {
    id: 2,
    name: "Charizard",
    image: "https://ejemplo.com/charizard.png"
  }
];

💡 Tip: Para las imágenes, puedes subirlas a servicios como ImgBB y usar el enlace directo.

🗺️ Recorriendo con map()

React nos ofrece métodos más eficientes que el bucle for tradicional. Usaremos map():

jsx-Recorriendo con map()

return (
  <div>
    {pokemons.map((item, index) => (
      <div key={index} className="card">
        <h1>{item.name}</h1>
        <img 
          src={item.image} 
          alt={item.name} 
          className="image"
        />
      </div>
    ))}
  </div>
);

🔑 La importancia de la key

React necesita un identificador único para cada elemento renderizado. Podemos usar:

• El index del array

• Un id único de cada item (mejor práctica)

jsx

// Opción 1 (con index)
<div key={index}>

// Opción 2 (con id)
<div key={item.id}>

🎨 Añadiendo estilos

Podemos dar estilos a nuestros elementos:

css

.image {
  width: 100px;
}

⚠️ Errores comunes

Si ves advertencias en la consola sobre las keys:

1. Asegúrate de asignar una key única

2. Actualiza la página después de corregirlo

¡Y listo! Ahora sabes cómo recorrer arrays en React de manera eficiente. ¿Qué otros métodos de array te gustaría aprender a usar en React? 🚀

Perfecto! Vamos a expandir el ejemplo anterior para incluir la funcionalidad de eliminar tareas. Aquí está el código completo y actualizado:

jsx

import React, { useState } from 'react';

const ListaDeTareas = () => {
  const [tareas, setTareas] = useState(['Tarea 1', 'Tarea 2']);
  const [nuevaTarea, setNuevaTarea] = useState('');

  // Agregar tarea
  const agregarTarea = () => {
    if (nuevaTarea.trim() !== '') {
      setTareas([...tareas, nuevaTarea]);
      setNuevaTarea('');
    }
  };

  // Eliminar tarea (por índice)
  const eliminarTarea = (index) => {
    const nuevasTareas = tareas.filter((_, i) => i !== index);
    setTareas(nuevasTareas);
  };

  // Manejar tecla Enter
  const manejarKeyPress = (e) => {
    if (e.key === 'Enter') {
      agregarTarea();
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '400px', margin: '0 auto' }}>
      <h2>Lista de Tareas</h2>
      <div style={{ marginBottom: '10px' }}>
        <input
          type="text"
          value={nuevaTarea}
          onChange={(e) => setNuevaTarea(e.target.value)}
          onKeyPress={manejarKeyPress}
          placeholder="Escribe una nueva tarea"
          style={{ padding: '8px', width: '70%', marginRight: '10px' }}
        />
        <button 
          onClick={agregarTarea}
          style={{ padding: '8px 12px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '4px' }}
        >
          Agregar
        </button>
      </div>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {tareas.map((tarea, index) => (
          <li 
            key={index} 
            style={{ 
              padding: '8px', 
              margin: '5px 0', 
              backgroundColor: '#f4f4f4', 
              borderRadius: '4px',
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center'
            }}
          >
            {tarea}
            <button 
              onClick={() => eliminarTarea(index)}
              style={{ 
                padding: '4px 8px', 
                backgroundColor: '#f44336', 
                color: 'white', 
                border: 'none', 
                borderRadius: '4px',
                cursor: 'pointer'
              }}
            >
              Eliminar
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ListaDeTareas;

Novedades añadidas:

1. Función eliminarTarea:

   • Usa filter() para crear un nuevo array sin el elemento a eliminar (por índice).

   • Importante: No mutamos el array original (tareas), seguimos las buenas prácticas de React.

2. Botón "Eliminar" en cada tarea:

   • Cada elemento de la lista ahora muestra un botón rojo para eliminarlo.

   • El botón llama a eliminarTarea(index) con el índice correspondiente.

3. Mejora en los estilos:

   • Flexbox para alinear el texto y el botón en la misma línea.

   • Estilos específicos para el botón de eliminar (color rojo y tamaño reducido).

¿Cómo funciona?

• Al hacer clic en "Eliminar", se filtra el array tareas excluyendo el elemento del índice seleccionado.

• React re-renderiza automáticamente la lista con el nuevo array.

¿Quieres más funcionalidades?

Podríamos añadir:

• Editar tareas existentes.

• Marcar tareas como completadas.

• Persistencia en localStorage.

¡Déjame saber si quieres que implemente alguna de estas