Aufgabe

In dieser Aufgabe werden Sie an derselben App weiterarbeiten und eine Filterfunktion hinzufügen, die es den Benutzern ermöglicht, Planeten nach Namen zu filtern.

Um die Filterkomponente zu erstellen, müssen wir ein Formular erstellen, das den Zustand des Eingabewerts beibehält. Zusätzlich benötigen wir eine Funktion, die auf Änderungen des Eingabewerts reagiert.

Anweisungen

In der App.jsx:

1. Initialisieren Sie den Zustand für den Eingabewert mit dem useState Hook. Setzen Sie den Anfangswert auf einen leeren String ("").

2. Überprüfen Sie im useEffect Hook die Logik, die die Daten filtert, wenn der Benutzer das Eingabefeld ändert. Entscheiden Sie, was in das Abhängigkeitsarray des useEffect Hooks aufgenommen werden soll, um sicherzustellen, dass es bei Bedarf ausgeführt wird.

3. Füllen Sie die Variable appData mit den richtigen Daten. Die Variable appData repräsentiert das context Objekt, und Sie müssen inputValue und handleInputChange für die Filter Komponente einbeziehen.

In der Filter.jsx: Greifen Sie mit dem inputValue Hook auf die Funktionen handleInputChange und useContext zu.

1. Um den Zustand zu initialisieren, verwenden Sie den useState Hook.

2. Für den useEffect Hook, fügen Sie inputValue in das Abhängigkeitsarray ein, da die Filterung von der Benutzereingabe abhängt.

3. Um die Daten für appData festzulegen, fügen Sie planets, inputValue und handleInputChange ein.

4. Um auf inputValue und handleInputChange zuzugreifen, verwenden Sie den Context, der als Wert für den useContext Hook bereitgestellt wird.