Entradas controladas

Los campos de texto plantean una pregunta: el usuario escribe en la casilla, pero tu componente tiene estado: ¿a quién le pertenece el texto? En React la respuesta es: el estado es el dueño. A esto se le conoce como un componente controlado (controlled input):

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

<input
    value={name}
    onChange={(e) => setName(e.target.value)}
/>

Dos cables forman el bucle:

• value={name}: el cuadro siempre muestra el estado
• onChange: cada pulsación de tecla llama al setter con e.target.value, el texto actual del cuadro

Así que escribir actualiza el estado, el estado vuelve a renderizar y el cuadro muestra el nuevo estado. La recompensa: el texto vive en una variable que puedes validar, transformar, limpiar o mostrar en cualquier otra parte de la página.