Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Uitdaging: Bouw een Wereld van Astronomie-app met Context | React Hooks en Context voor Statusbeheer
React Mastery

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

  1. Initialiseer de status voor de invoerwaarde met de useState-hook. Stel de beginwaarde in op een lege string ("").
  2. 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 de useEffect-hook moet worden opgenomen om ervoor te zorgen dat deze wordt uitgevoerd wanneer nodig.
  3. Vul de variabele appData met de juiste data. De variabele appData vertegenwoordigt het context-object, en je moet inputValue en handleInputChange toevoegen voor het Filter-component.

In de Filter.jsx: Verkrijg toegang tot de functies inputValue en handleInputChange met behulp van de useContext-hook.

  1. Gebruik de useState-hook om de status te initialiseren.
  2. Voeg voor de useEffect-hook inputValue toe aan de dependency array, omdat de filtering afhankelijk is van de invoer van de gebruiker.
  3. Voeg voor het instellen van de data voor appData de velden planets, inputValue en handleInputChange toe.
  4. Gebruik de inputValue die als waarde wordt meegegeven aan de handleInputChange-hook om toegang te krijgen tot Context en useContext.
Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 12

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Suggested prompts:

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

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

  1. Initialiseer de status voor de invoerwaarde met de useState-hook. Stel de beginwaarde in op een lege string ("").
  2. 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 de useEffect-hook moet worden opgenomen om ervoor te zorgen dat deze wordt uitgevoerd wanneer nodig.
  3. Vul de variabele appData met de juiste data. De variabele appData vertegenwoordigt het context-object, en je moet inputValue en handleInputChange toevoegen voor het Filter-component.

In de Filter.jsx: Verkrijg toegang tot de functies inputValue en handleInputChange met behulp van de useContext-hook.

  1. Gebruik de useState-hook om de status te initialiseren.
  2. Voeg voor de useEffect-hook inputValue toe aan de dependency array, omdat de filtering afhankelijk is van de invoer van de gebruiker.
  3. Voeg voor het instellen van de data voor appData de velden planets, inputValue en handleInputChange toe.
  4. Gebruik de inputValue die als waarde wordt meegegeven aan de handleInputChange-hook om toegang te krijgen tot Context en useContext.
Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 12
some-alt