Oppgave

I denne oppgaven skal du fortsette arbeidet med den samme appen, og legge til en filtreringsfunksjon som lar brukerne filtrere planeter etter navn.

For å lage filtreringskomponenten må vi opprette et skjema som vedlikeholder tilstanden til input-verdien. I tillegg trenger vi en funksjon som reagerer på endringer i input-verdien.

Instruksjoner

I App.jsx:

1. Initialiser tilstanden for input-verdien ved å bruke useState-hooken. Sett startverdien til en tom streng ("").
2. I useEffect-hooken, sjekk logikken som filtrerer dataene når brukeren endrer input-feltet. Bestem hva som skal inkluderes i dependency-arrayet til useEffect-hooken for å sikre at den kjøres når det er nødvendig.
3. Fyll appData-variabelen med korrekt data. appData-variabelen representerer context-objektet, og du må inkludere inputValue og handleInputChange for Filter-komponenten.

I Filter.jsx: Få tilgang til inputValue og handleInputChange-funksjonene ved å bruke useContext-hooken.

1. For å initialisere tilstanden, bruk useState-hooken.
2. For useEffect-hooken, inkluder inputValue i dependency-arrayet siden filtreringen avhenger av brukerens input.
3. For å sette data for appData, inkluder planets, inputValue og handleInputChange.
4. For å få tilgang til inputValue og handleInputChange, bruk Context som er gitt som verdi til useContext-hooken.