Tarefa

Nesta tarefa, você continuará trabalhando no mesmo aplicativo, adicionando um recurso de filtragem que permite aos usuários filtrar planetas pelo nome.

Para criar o componente de filtragem, é necessário criar um formulário que mantenha o estado do valor do campo de entrada. Além disso, é preciso uma função que responda às alterações no valor do campo de entrada.

Instruções

No App.jsx:

1. Inicialize o estado para o valor do campo de entrada utilizando o hook useState. Defina o valor inicial como uma string vazia ("").
2. No hook useEffect, verifique a lógica que irá filtrar os dados quando o usuário alterar o campo de entrada. Decida o que deve ser incluído no array de dependências do hook useEffect para garantir que ele seja executado quando necessário.
3. Preencha a variável appData com os dados corretos. A variável appData representa o objeto context, e você precisa incluir inputValue e handleInputChange para o componente Filter.

No Filter.jsx: Acesse as funções inputValue e handleInputChange utilizando o hook useContext.

1. Para inicializar o estado, utilize o hook useState.
2. Para o hook useEffect, inclua inputValue no array de dependências, pois a filtragem depende da entrada do usuário.
3. Para definir os dados de appData, inclua planets, inputValue e handleInputChange.
4. Para acessar inputValue e handleInputChange, utilize o Context fornecido como valor para o hook useContext.