Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Utfordring: Bygg en Astronomiapp med Context | React Hooks og Context for Tilstandshåndtering
React Mastery

bookUtfordring: 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:

  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.
Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 12

Spør AI

expand

Spør AI

ChatGPT

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

bookUtfordring: 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:

  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.
Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 12
some-alt