🔢 Manejo de múltiples entradas y estados en formularios React

🔢 Manejo de múltiples entradas y estados en formularios React

En formularios complejos, a menudo necesitamos manejar varios campos de entrada y mantener sus valores en un solo estado. React permite hacerlo de manera eficiente usando un objeto en el estado que contenga todas las entradas del formulario.

---

1️⃣ Formulario con múltiples inputs controlados

Cada input actualiza el estado correspondiente usando la propiedad name para identificar el campo.

function App() {
  const [formData, setFormData] = React.useState({
    nombre: "",
    email: "",
    password: ""
  });

  const handleChange = e => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  return (
    <form>
      <label>Nombre:</label>
      <input type="text" name="nombre" value={formData.nombre} onChange={handleChange} />

      <label>Email:</label>
      <input type="email" name="email" value={formData.email} onChange={handleChange} />

      <label>Contraseña:</label>
      <input type="password" name="password" value={formData.password} onChange={handleChange} />

      <p>Nombre: {formData.nombre}</p>
      <p>Email: {formData.email}</p>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  

Nombre: Email: Contraseña:

Nombre: …

Email: …

---

2️⃣ Buenas prácticas

• ✅ Usar un único estado tipo objeto para múltiples campos mejora la organización.
• ✅ Usar la propiedad name en cada input permite manejar todos con la misma función handleChange.
• ✅ Nunca mutar directamente el estado; usar siempre el spread operator ....
• ✅ Mantener el estado inicial con todas las propiedades necesarias para evitar errores.

← Volver al índice