Uitdaging: Bouw een Wereld van Astronomie-app met Context
Taak
In deze taak ga je verder met dezelfde app en voeg je een filterfunctie toe waarmee gebruikers planeten op naam kunnen filteren.
Om het filtercomponent te maken, moet je een formulier aanmaken dat de status van de invoerwaarde bijhoudt. Daarnaast is er een functie nodig die reageert op wijzigingen in de invoerwaarde.
Instructies
In de App.jsx
:
- Initialiseer de status voor de invoerwaarde met de
useState
-hook. Stel de beginwaarde in op een lege string (""
). - Controleer in de
useEffect
-hook de logica die de data filtert wanneer de gebruiker het invoerveld wijzigt. Bepaal wat er in de dependency array van deuseEffect
-hook moet worden opgenomen om ervoor te zorgen dat deze wordt uitgevoerd wanneer nodig. - Vul de variabele
appData
met de juiste data. De variabeleappData
vertegenwoordigt hetcontext
-object, en je moetinputValue
enhandleInputChange
toevoegen voor hetFilter
-component.
In de Filter.jsx
:
Verkrijg toegang tot de functies inputValue
en handleInputChange
met behulp van de useContext
-hook.
- Gebruik de
useState
-hook om de status te initialiseren. - Voeg voor de
useEffect
-hookinputValue
toe aan de dependency array, omdat de filtering afhankelijk is van de invoer van de gebruiker. - Voeg voor het instellen van de data voor
appData
de veldenplanets
,inputValue
enhandleInputChange
toe. - Gebruik de
inputValue
die als waarde wordt meegegeven aan dehandleInputChange
-hook om toegang te krijgen totContext
enuseContext
.
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Can you explain how the filtering logic should work in the useEffect hook?
What should the handleInputChange function do exactly?
How do I connect the Filter component to the context?
Awesome!
Completion rate improved to 2.17
Uitdaging: Bouw een Wereld van Astronomie-app met Context
Veeg om het menu te tonen
Taak
In deze taak ga je verder met dezelfde app en voeg je een filterfunctie toe waarmee gebruikers planeten op naam kunnen filteren.
Om het filtercomponent te maken, moet je een formulier aanmaken dat de status van de invoerwaarde bijhoudt. Daarnaast is er een functie nodig die reageert op wijzigingen in de invoerwaarde.
Instructies
In de App.jsx
:
- Initialiseer de status voor de invoerwaarde met de
useState
-hook. Stel de beginwaarde in op een lege string (""
). - Controleer in de
useEffect
-hook de logica die de data filtert wanneer de gebruiker het invoerveld wijzigt. Bepaal wat er in de dependency array van deuseEffect
-hook moet worden opgenomen om ervoor te zorgen dat deze wordt uitgevoerd wanneer nodig. - Vul de variabele
appData
met de juiste data. De variabeleappData
vertegenwoordigt hetcontext
-object, en je moetinputValue
enhandleInputChange
toevoegen voor hetFilter
-component.
In de Filter.jsx
:
Verkrijg toegang tot de functies inputValue
en handleInputChange
met behulp van de useContext
-hook.
- Gebruik de
useState
-hook om de status te initialiseren. - Voeg voor de
useEffect
-hookinputValue
toe aan de dependency array, omdat de filtering afhankelijk is van de invoer van de gebruiker. - Voeg voor het instellen van de data voor
appData
de veldenplanets
,inputValue
enhandleInputChange
toe. - Gebruik de
inputValue
die als waarde wordt meegegeven aan dehandleInputChange
-hook om toegang te krijgen totContext
enuseContext
.
Bedankt voor je feedback!