Utfordring: Bygg en Astronomiapp med Context
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
:
- Initialiser tilstanden for input-verdien ved å bruke
useState
-hooken. Sett startverdien til en tom streng (""
). - I
useEffect
-hooken, sjekk logikken som filtrerer dataene når brukeren endrer input-feltet. Bestem hva som skal inkluderes i dependency-arrayet tiluseEffect
-hooken for å sikre at den kjøres når det er nødvendig. - Fyll
appData
-variabelen med korrekt data.appData
-variabelen representerercontext
-objektet, og du må inkludereinputValue
oghandleInputChange
forFilter
-komponenten.
I Filter.jsx
:
Få tilgang til inputValue
og handleInputChange
-funksjonene ved å bruke useContext
-hooken.
- For å initialisere tilstanden, bruk
useState
-hooken. - For
useEffect
-hooken, inkluderinputValue
i dependency-arrayet siden filtreringen avhenger av brukerens input. - For å sette data for
appData
, inkluderplanets
,inputValue
oghandleInputChange
. - For å få tilgang til
inputValue
oghandleInputChange
, brukContext
som er gitt som verdi tiluseContext
-hooken.
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Awesome!
Completion rate improved to 2.17
Utfordring: Bygg en Astronomiapp med Context
Sveip for å vise menyen
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
:
- Initialiser tilstanden for input-verdien ved å bruke
useState
-hooken. Sett startverdien til en tom streng (""
). - I
useEffect
-hooken, sjekk logikken som filtrerer dataene når brukeren endrer input-feltet. Bestem hva som skal inkluderes i dependency-arrayet tiluseEffect
-hooken for å sikre at den kjøres når det er nødvendig. - Fyll
appData
-variabelen med korrekt data.appData
-variabelen representerercontext
-objektet, og du må inkludereinputValue
oghandleInputChange
forFilter
-komponenten.
I Filter.jsx
:
Få tilgang til inputValue
og handleInputChange
-funksjonene ved å bruke useContext
-hooken.
- For å initialisere tilstanden, bruk
useState
-hooken. - For
useEffect
-hooken, inkluderinputValue
i dependency-arrayet siden filtreringen avhenger av brukerens input. - For å sette data for
appData
, inkluderplanets
,inputValue
oghandleInputChange
. - For å få tilgang til
inputValue
oghandleInputChange
, brukContext
som er gitt som verdi tiluseContext
-hooken.
Takk for tilbakemeldingene dine!