Tehtävä

Tässä tehtävässä jatkat saman sovelluksen parissa lisäämällä suodatusominaisuuden, jonka avulla käyttäjät voivat suodattaa planeettoja nimen perusteella.

Suodatuskomponentin luomiseksi tarvitsemme lomakkeen, joka ylläpitää syötekentän arvon tilaa. Lisäksi tarvitsemme funktion, joka reagoi syötearvon muutoksiin.

Ohjeet

Tiedostossa App.jsx:

1. Alusta syötekentän tila käyttämällä useState-hookia. Aseta alkuarvoksi tyhjä merkkijono ("").
2. Tarkista useEffect-hookissa logiikka, joka suodattaa dataa, kun käyttäjä muuttaa syötekenttää. Päätä, mitä tulee sisällyttää useEffect-hookin riippuvuuslistaan, jotta se suoritetaan tarvittaessa.
3. Täydennä appData-muuttuja oikealla datalla. appData edustaa context-objektia, ja siihen tulee sisällyttää inputValue ja handleInputChange Filter-komponenttia varten.

Tiedostossa Filter.jsx: Hae inputValue ja handleInputChange -funktiot käyttämällä useContext-hookia.

1. Tilamuuttujan alustamiseen käytä useState-hookia.
2. useEffect-hookissa lisää inputValue riippuvuuslistaan, koska suodatus perustuu käyttäjän syötteeseen.
3. Aseta data appData-muuttujaan sisällyttämällä planets, inputValue ja handleInputChange.
4. Käytä inputValue-arvoa handleInputChange-hookin kautta saadaksesi Context ja useContext käyttöösi.