Uppgift

I denna uppgift fortsätter du att arbeta med samma app och lägger till en filtreringsfunktion som gör det möjligt för användare att filtrera planeter efter namn.

För att skapa filtreringskomponenten behöver vi skapa ett formulär som hanterar tillståndet för inmatningsvärdet. Dessutom krävs en funktion som reagerar på förändringar i inmatningsvärdet.

Instruktioner

I App.jsx:

1. Initiera tillståndet för inmatningsvärdet med hjälp av hooken useState. Sätt initialvärdet till en tom sträng ("").
2. I hooken useEffect, kontrollera logiken som filtrerar data när användaren ändrar inmatningsfältet. Bestäm vad som ska inkluderas i beroende-arrayen för hooken useEffect för att säkerställa att den körs vid behov.
3. Fyll variabeln appData med korrekt data. Variabeln appData representerar context-objektet, och du behöver inkludera inputValue och handleInputChange för komponenten Filter.

I Filter.jsx: Få åtkomst till inputValue och funktionerna handleInputChange med hjälp av hooken useContext.

1. För att initiera tillståndet, använd hooken useState.
2. För hooken useEffect, inkludera inputValue i beroende-arrayen eftersom filtreringen beror på användarens inmatning.
3. För att sätta data för appData, inkludera planets, inputValue och handleInputChange.
4. För att komma åt inputValue och handleInputChange, använd det Context som tillhandahålls som värde för hooken useContext.