Questão FC373454
Um desenvolvedor está criando uma aplicação React na qual o usuário pode inserir um texto e vê-lo imediatamente atualizado em tempo real em uma lista abaixo do campo de entrada. Pa
Desenvolvimento Web
FCC · 2024
Um desenvolvedor está criando uma aplicação React na qual o usuário pode inserir um texto e vê-lo imediatamente atualizado em tempo real em uma lista abaixo do campo de entrada. Para isso ele decide usar um estado local para armazenar o valor do campo de entrada e o conteúdo da lista. Nesse contexto, em condições ideais, a abordagem adequada para atualizar o estado quando o usuário digitar no campo de entrada é usar
- this.setState em componentes funcionais para manter o estado atualizado a cada caractere digitado.
- setState dentro de um componente de classe com this.state.input para atualizar o estado do campo.
- o Hook useEffecr para definir o valor de input toda vez que o campo tiver seu conteúdo alterado.
- o Hook useState e atualizar o valor do estado diretamente no evento onChange do campo de entrada.
- useStat e useEffecr em conjunto para garantir que o estado seja atualizado corretamente.
Mostrar resposta e comentário
Gabarito
D
Comentário do professor
A alternativa correta indica usar o Hook useState e atualizar o valor do estado diretamente no evento onChange do campo de entrada. Em componentes funcionais, useState cria uma fonte única de verdade para o valor do input, retornando o par [valor, setValor] que permite atualizar o estado imediatamente.
Ao ligar onChange a uma função que chama setValor(e.target.value), o React re-renderiza o componente com o novo texto, garantindo que a lista abaixo reflita em tempo real o conteúdo digitado. Isso transforma o input em um controlled component, com comportamento previsível e sincronia entre UI e estado.
Exemplo resumido:
const [text, setText] = useState('');
setText(e.target.value)} />
- {text &&
- {text} }
Conteúdo do catálogo FC Concursos · Atualizado em