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.