Estados complejos

Usar estados complejos en React, como objetos o arreglos, es similar a usar estados simples. Sin embargo, debes tener en cuenta algunas consideraciones adicionales al actualizar estos estados debido a su naturaleza inmutable en React. Aquí te explico cómo utilizar y actualizar estados complejos, junto con algunos ejemplos de uso:

1. Utilizando estados complejos:

Utilizando un objeto como estado:

import React, { useState } from 'react';

const EjemploEstadoObjeto = () => {
    const [usuario, setUsuario] = useState({
        nombre: '',
        edad: 0,
        email: ''
    });

    const handleInputChange = (event) => {
        const { name, value } = event.target;
        setUsuario({
            ...usuario,
            [name]: value
        });
    };

    return (
        <form>
            <input
                type="text"
                name="nombre"
                value={usuario.nombre}
                onChange={handleInputChange}
                placeholder="Nombre"
            />
            <input
                type="number"
                name="edad"
                value={usuario.edad}
                onChange={handleInputChange}
                placeholder="Edad"
            />
            <input
                type="email"
                name="email"
                value={usuario.email}
                onChange={handleInputChange}
                placeholder="Email"
            />
        </form>
    );
};

export default EjemploEstadoObjeto;

En este ejemplo, estamos utilizando un objeto usuario como estado inicial. Cada vez que cambia un campo de entrada, la función handleInputChange se ejecuta, actualizando el estado del usuario con el nuevo valor.

Utilizando un array como estado:

import React, { useState } from 'react';

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

    const agregarTarea = () => {
        setTareas([...tareas, `Tarea ${tareas.length + 1}`]);
    };

    return (
        <div>
            <ul>
                {tareas.map((tarea, index) => (
                    <li key={index}>{tarea}</li>
                ))}
            </ul>
            <button onClick={agregarTarea}>Agregar Tarea</button>
        </div>
    );
};

export default EjemploEstadoArreglo;

En este ejemplo, tareas es un arreglo de cadenas. Cuando se hace clic en el botón “Agregar Tarea”, se agrega una nueva tarea al arreglo utilizando el operador spread (...).

2. Consideraciones al actualizar estados complejos:

• Para actualizar estados complejos, como objetos o arreglos, debes asegurarte de mantener la inmutabilidad del estado. Esto significa que no debes modificar directamente el estado existente, sino crear una copia del estado y modificar la copia.
• Cuando actualices un estado complejo que es un objeto, puedes usar el operador spread (...) para crear una copia del objeto y luego actualizar solo las propiedades necesarias.
• Para estados complejos que son arreglos, también puedes utilizar el operador spread para crear una nueva copia del arreglo y luego agregar, eliminar o modificar elementos según sea necesario.

Utilizar estados complejos en React te permite gestionar datos más estructurados y avanzados en tus componentes, lo que puede ser útil para una variedad de casos de uso, como formularios, listas dinámicas y más. Recuerda seguir las mejores prácticas para mantener la inmutabilidad del estado al actualizar estados complejos.