Aufgabe

In dieser Aufgabe arbeitest du weiterhin an derselben App und fügst eine Filterfunktion hinzu, mit der Benutzer Planeten nach Namen filtern können.

Um die Filterkomponente zu erstellen, muss ein Formular erstellt werden, das den Zustand des Eingabewerts verwaltet. Zusätzlich wird eine Funktion benötigt, die auf Änderungen des Eingabewerts reagiert.

Anweisungen

In der App.jsx:

1. Initialisierung des Zustands für den Eingabewert mit dem useState-Hook. Setze den Anfangswert auf einen leeren String ("").
2. Überprüfe im useEffect-Hook die Logik, die die Daten filtert, wenn der Benutzer das Eingabefeld ändert. Entscheide, was in das Abhängigkeitsarray des useEffect-Hooks aufgenommen werden muss, damit dieser bei Bedarf ausgeführt wird.
3. Befülle die Variable appData mit den korrekten Daten. Die Variable appData repräsentiert das context-Objekt und muss inputValue und handleInputChange für die Filter-Komponente enthalten.

In der Filter.jsx: Zugriff auf die Funktionen inputValue und handleInputChange mit dem useContext-Hook erhalten.

1. Zur Initialisierung des Zustands den useState-Hook verwenden.
2. Für den useEffect-Hook inputValue im Abhängigkeitsarray aufnehmen, da die Filterung von der Benutzereingabe abhängt.
3. Um die Daten für appData zu setzen, planets, inputValue und handleInputChange einbeziehen.
4. Um auf inputValue und handleInputChange zuzugreifen, den Context verwenden, der als Wert für den useContext-Hook bereitgestellt wird.