10-0-2-Manejar formularios con useState y objetos

  Cómo manejar formularios con useState y objetos en React

Cuando trabajamos con formularios en React, especialmente aquellos con muchos campos, crear un estado individual para cada input puede volverse tedioso. Imagina tener que hacer esto para 50 campos:

jsx

Copy

Download

const [title, setTitle] = useState('')
const [description, setDescription] = useState('')
const [email, setEmail] = useState('')
// ... y así 47 veces más 😅

Afortunadamente, hay una solución más elegante: usar un objeto en el estado.

La solución: Un único estado con objeto

Podemos agrupar todos los campos del formulario en un solo objeto:

jsx

Copy

Download

const [formData, setFormData] = useState({
  title: '',
  description: '',
  state: 'pendiente',
  // todos los demás campos aquí
})

Cómo actualizar cada campo

La magia está en cómo manejamos los cambios. Usamos el name de cada input para identificar qué campo actualizar:

jsx

Copy

Download

<input
  type="text"
  name="title"
  value={formData.title}
  onChange={(e) => setFormData({
    ...formData,
    title: e.target.value
  })}
/>

¿Qué está pasando aquí?

1. ...formData: Creamos una copia de todos los valores actuales del estado

2. title: e.target.value: Actualizamos solo el campo que cambió

Ejemplo completo con múltiples campos

jsx

Copy

Download

import { useState } from "react"

const MiFormulario = () => {
  const [formData, setFormData] = useState({
    title: 'Ejemplo',
    description: '',
    state: 'pendiente'
  })

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(formData) // Aquí tienes todos los datos!
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Título"
        name="title"
        value={formData.title}
        onChange={(e) => setFormData({...formData, title: e.target.value})}
      />
      
      <textarea
        placeholder="Descripción"
        name="description"
        value={formData.description}
        onChange={(e) => setFormData({...formData, description: e.target.value})}
      />
      
      <button type="submit">Enviar</button>
    </form>
  )
}

Beneficios de este enfoque

1. Menos código: Un solo estado en lugar de múltiples useState

2. Más organizado: Todos los datos del formulario están agrupados

3. Fácil escalamiento: Añadir nuevos campos es sencillo

Consejo profesional

Si tu formulario es muy complejo, considera usar librerías como Formik o React Hook Form. Pero para la mayoría de casos, esta solución con objetos y useState es perfecta.

¿Has usado esta técnica antes? ¡Cuéntame tu experiencia en los comentarios!

---

Este post mantiene un tono claro y accesible, con ejemplos prácticos y explicaciones sencillas. Puedes ajustar el estilo o añadir más detalles según tu audiencia.