Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Herausforderung: Eine Filmliste Rendern | Wiederverwendbare Komponenten und Datenfluss
Einführung in React

Herausforderung: Eine Filmliste Rendern

Swipe um das Menü anzuzeigen

Aufgabe

Eine Liste von Filmen mit der Methode map() rendern.

Die Komponente MovieList muss Folgendes enthalten:

  1. Ein ul-Element.

  2. Für jeden Film im Array li ein movies-Element mit map() rendern.

  3. Jedes li-Element muss:

  • Den Filmtitel anzeigen.
    • Eine eindeutige key-Prop mit dem Wert movie.id enthalten.

Die Komponente App übergibt das Array moviesData bereits an die Komponente MovieList.

Startcode

Öffne das folgende Starter-Projekt und vervollständige die fehlenden Teile der Komponente.

Starter code

Lösung

Das Ergebnis kann mit der finalen Lösung unten verglichen werden.

Solution code

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 6

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Abschnitt 2. Kapitel 6
some-alt