Entradas controladas

Los campos de texto plantean una pregunta: el usuario escribe en el cuadro, pero tu componente tiene estado: ¿quién es el propietario del texto? En React, la respuesta es: el estado es su propietario. Esto se denomina campo controlado:

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.