Herausforderung: Autolistenfiltering

Aufgabe

Erstellen Sie die CarList-Komponente, die für das Rendern einer Liste von Autos und das Bereitstellen einer Suchfunktionalität verantwortlich ist, um sie basierend auf ihren Namen zu filtern. Sie ermöglicht es den Benutzern, einen Suchbegriff einzugeben und die Liste der Autos dynamisch basierend auf dieser Eingabe zu filtern.

Anweisungen

1. Importieren Sie die notwendigen Hooks aus der React-Bibliothek.
2. Deklarieren Sie innerhalb der CarList-Komponente eine Zustandsvariable searchInput und eine Zustandsaktualisierungsfunktion setSearchInput mit dem useState-Hook. Initialisieren Sie searchInput mit einem leeren String.
3. Verwenden Sie den useMemo-Hook, um das filteredCars-Array zu memoizieren. Die Memoisierungslogik sollte die Autos basierend auf dem searchInput filtern. Wenn searchInput leer ist, geben Sie alle Autos zurück; andernfalls filtern Sie die Autos basierend auf der Sucheingabe.
4. Geben Sie im Abhängigkeitsarray von useMemo die korrekten Variablen an, von denen die memoisierte Funktion abhängt.

1. Fügen Sie eine import-Anweisung hinzu, um den notwendigen Hook aus der React-Bibliothek zu importieren.
2. Verwenden Sie den useState-Hook, um eine Zustandsvariable und ihre Aktualisierungsfunktion zu deklarieren.
3. Der useMemo-Hook speichert das gefilterte Auto-Array zwischen, um unnötige Neuberechnungen zu verhindern.
4. In dem Abhängigkeitsarray von useMemo schließen Sie die Variablen ein, von denen die zwischengespeicherte Funktion abhängt (cars und searchInput).