Opgave

I denne opgave skal du fortsætte arbejdet på den samme app og tilføje en filtreringsfunktion, der gør det muligt for brugerne at filtrere planeter efter navn.

For at oprette filtreringskomponenten skal vi lave en formular, der vedligeholder tilstanden for inputværdien. Derudover har vi brug for en funktion, der reagerer på ændringer i inputværdien.

Instruktioner

I App.jsx:

1. Initialiser tilstanden for inputværdien ved hjælp af useState-hooken. Sæt startværdien til en tom streng ("").
2. I useEffect-hooken skal du kontrollere logikken, der filtrerer dataene, når brugeren ændrer inputfeltet. Beslut, hvad der skal inkluderes i afhængighedsarrayet for useEffect-hooken for at sikre, at den kører, når det er nødvendigt.
3. Udfyld variablen appData med de korrekte data. Variablen appData repræsenterer context-objektet, og du skal inkludere inputValue og handleInputChange til Filter-komponenten.

I Filter.jsx: Få adgang til inputValue og handleInputChange-funktionerne ved at bruge useContext-hooken.

1. For at initialisere tilstanden skal du bruge useState-hooken.
2. For useEffect-hooken skal du inkludere inputValue i afhængighedsarrayet, da filtreringen afhænger af brugerens input.
3. For at sætte dataene for appData skal du inkludere planets, inputValue og handleInputChange.
4. For at få adgang til inputValue og handleInputChange skal du bruge den Context, der er angivet som værdi til useContext-hooken.