¿Cómo funciona un formulario en React?

 Te lo explico muy claro y paso a paso, y lo integramos como una tercera página al ejemplo anterior con React Router.

La idea será:

• Inicio → muestra la lista (fakeApiData)

• Contáctenos

• Agregar usuario → formulario para agregar datos a la lista

⚠️ Nota importante (concepto clave):
Como fakeApiData no es una API real, los datos solo vivirán en memoria mientras la app esté abierta.
Esto es perfecto para aprender formularios y estado.

---

1️⃣ ¿Cómo funciona un formulario en React?

En React, un formulario se maneja con estado (useState).

Conceptos básicos

1. Cada input tiene un valor controlado

2. El valor vive en un useState

3. onChange actualiza el estado

4. onSubmit procesa los datos

Ejemplo mental simple

Input → escribe → onChange → useState → React renderiza

---

2️⃣ Vamos a mover fakeApiData al componente padre

Para que Inicio y Agregar compartan los datos, el estado debe vivir en App.js.

---

3️⃣ App.js (estado global + rutas)

App.js

import { Routes, Route, Link } from "react-router-dom";
import { useState } from "react";
import Home from "./pages/Home";
import Contact from "./pages/Contact";
import AddUser from "./pages/AddUser";

function App() {
  // Estado que reemplaza fakeApiData
  const [users, setUsers] = useState([
    { id: 1, name: "Juan" },
    { id: 2, name: "María" },
    { id: 3, name: "Pedro" }
  ]);

  return (
    <>
      <nav style={{ padding: "10px", borderBottom: "1px solid #ccc" }}>
        <Link to="/" style={{ marginRight: "10px" }}>Inicio</Link>
        <Link to="/contacto" style={{ marginRight: "10px" }}>Contáctenos</Link>
        <Link to="/agregar">Agregar Usuario</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home users={users} />} />
        <Route path="/contacto" element={<Contact />} />
        <Route 
          path="/agregar" 
          element={<AddUser users={users} setUsers={setUsers} />} 
        />
      </Routes>
    </>
  );
}

export default App;

📌 Aquí pasa algo muy importante:

• users es el estado

• setUsers permite modificarlo

• Se pasan como props a los componentes

---

4️⃣ Página Inicio (Home.jsx)

Ahora recibe los datos por props.

pages/Home.jsx

function Home({ users }) {
  return (
    <div style={{ padding: "20px" }}>
      <h1>Página de Inicio</h1>

      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default Home;

---

5️⃣ Página Agregar Usuario (Formulario)

Aquí está el corazón del formulario.

---

6️⃣ Explicación del formulario paso a paso

pages/AddUser.jsx

import { useState } from "react";
import { useNavigate } from "react-router-dom";

function AddUser({ users, setUsers }) {
  const [name, setName] = useState("");
  const navigate = useNavigate();

  // 1️⃣ Captura lo que se escribe
  const handleChange = (e) => {
    setName(e.target.value);
  };

  // 2️⃣ Cuando se envía el formulario
  const handleSubmit = (e) => {
    e.preventDefault(); // evita recarga

    if (name.trim() === "") return;

    const newUser = {
      id: users.length + 1,
      name: name
    };

    // 3️⃣ Actualiza la lista
    setUsers([...users, newUser]);

    // 4️⃣ Limpia el input
    setName("");

    // 5️⃣ Regresa al inicio
    navigate("/");
  };

  return (
    <div style={{ padding: "20px" }}>
      <h1>Agregar Usuario</h1>

      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Nombre"
          value={name}
          onChange={handleChange}
        />

        <br /><br />

        <button type="submit">Guardar</button>
      </form>
    </div>
  );
}

export default AddUser;

---

7️⃣ ¿Qué está pasando aquí? (explicación clara)

🔹 useState

const [name, setName] = useState("");

• name → valor del input

• setName → cambia el valor

---

🔹 Input controlado

<input
  value={name}
  onChange={handleChange}
/>

• React controla el input

• El input siempre refleja el estado

---

🔹 Envío del formulario

<form onSubmit={handleSubmit}>

e.preventDefault();

❌ Evita que el navegador recargue la página

---

🔹 Agregar a la lista

setUsers([...users, newUser]);

• Copia el arreglo

• Agrega el nuevo elemento

• React vuelve a renderizar

---

🔹 Navegación automática

navigate("/");

Redirige a la página de inicio

---

8️⃣ Flujo completo del usuario

1. Entra a Inicio

2. Da clic en Agregar Usuario

3. Escribe un nombre

4. Presiona Guardar

5. Regresa a Inicio

6. Ve el nuevo usuario en la lista ✅

---

9️⃣ Resumen ultra corto

Elemento	Función
useState	Guarda datos
onChange	Captura escritura
onSubmit	Procesa el formulario
setUsers	Actualiza la lista
useNavigate	Cambia de página

---

Si quieres, en el siguiente paso puedo enseñarte:

• 🔹 Formularios con varios campos

• 🔹 Validaciones simples

• 🔹 Guardar datos en localStorage

• 🔹 Conectarlo a una API real (PHP / MySQL) → sé que esto te serviría mucho