Estado y useState

Que es el Estado?

El estado (state) es datos que un componente gestiona internamente y que pueden cambiar con el tiempo. Cuando el estado cambia, React vuelve a renderizar el componente automaticamente para reflejar los nuevos datos.

El Hook useState

import { useState } from 'react';

function Contador() {
  // useState retorna un array: [valor, funcionSetter]
  const [cuenta, setCuenta] = useState(0);

  return (
    <div>
      <p>Cuenta: {cuenta}</p>
      <button onClick={() => setCuenta(cuenta + 1)}>
        Incrementar
      </button>
    </div>
  );
}

Multiples Variables de Estado

function Formulario() {
  const [nombre, setNombre] = useState('');
  const [email, setEmail] = useState('');
  const [edad, setEdad] = useState(0);

  return (
    <form>
      <input
        value={nombre}
        onChange={(e) => setNombre(e.target.value)}
        placeholder="Nombre"
      />
      <input
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <input
        type="number"
        value={edad}
        onChange={(e) => setEdad(Number(e.target.value))}
        placeholder="Edad"
      />
    </form>
  );
}

Estado con Objetos

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

  const actualizarNombre = (nuevoNombre) => {
    // Siempre crea un nuevo objeto, no mutes el existente
    setUsuario({
      ...usuario,
      nombre: nuevoNombre
    });
  };

  return (
    <input
      value={usuario.nombre}
      onChange={(e) => actualizarNombre(e.target.value)}
    />
  );
}

Estado con Arrays

function ListaTareas() {
  const [tareas, setTareas] = useState([]);

  const agregarTarea = (texto) => {
    setTareas([...tareas, { id: Date.now(), texto, completada: false }]);
  };

  const eliminarTarea = (id) => {
    setTareas(tareas.filter(tarea => tarea.id !== id));
  };

  const toggleTarea = (id) => {
    setTareas(tareas.map(tarea =>
      tarea.id === id
        ? { ...tarea, completada: !tarea.completada }
        : tarea
    ));
  };

  return (
    <ul>
      {tareas.map(tarea => (
        <li key={tarea.id}>
          <span style={{ textDecoration: tarea.completada ? 'line-through' : 'none' }}>
            {tarea.texto}
          </span>
          <button onClick={() => toggleTarea(tarea.id)}>Toggle</button>
          <button onClick={() => eliminarTarea(tarea.id)}>Eliminar</button>
        </li>
      ))}
    </ul>
  );
}