Inputs Controlados

Inputs de texto trazem uma questão: o usuário digita na caixa, mas seu componente tem estado: quem é o dono do texto? No React, a resposta é: o estado é o dono. Isso é chamado de controlled input (input controlado):

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

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

Dois fios formam o ciclo:

• value={name}: a caixa sempre exibe o estado
• onChange: cada tecla digitada chama o setter com e.target.value, o texto atual da caixa

Portanto, digitar atualiza o estado, o estado renderiza novamente e a caixa mostra o novo estado. O resultado: o texto vive em uma variável que você pode validar, transformar, limpar ou exibir em qualquer outro lugar da página.