Compito

In questo compito, continuerai a lavorare sulla stessa applicazione, aggiungendo una funzionalità di filtraggio che consente agli utenti di filtrare i pianeti per nome.

Per creare il componente di filtraggio, è necessario creare un modulo che mantenga lo stato del valore dell'input. Inoltre, è richiesta una funzione che risponda ai cambiamenti del valore dell'input.

Istruzioni

In App.jsx:

1. Inizializzare lo stato per il valore dell'input utilizzando l'hook useState. Impostare il valore iniziale su una stringa vuota ("").
2. Nell'hook useEffect, verificare la logica che filtra i dati quando l'utente modifica il campo di input. Decidere cosa includere nell'array delle dipendenze dell'hook useEffect per garantire che venga eseguito quando necessario.
3. Popolare la variabile appData con i dati corretti. La variabile appData rappresenta l'oggetto context e occorre includere inputValue e handleInputChange per il componente Filter.

In Filter.jsx: Accedere a inputValue e alle funzioni handleInputChange utilizzando l'hook useContext.

1. Per inizializzare lo stato, utilizzare l'hook useState.
2. Per l'hook useEffect, includere inputValue nell'array delle dipendenze poiché il filtraggio dipende dall'input dell'utente.
3. Per impostare i dati per appData, includere planets, inputValue e handleInputChange.
4. Per accedere a inputValue e handleInputChange, utilizzare il Context fornito come valore per l'hook useContext.