Aufgabe

Erstellung einer einfachen Social-Media-Postkarte mit funktionierendem Like-Zähler unter Verwendung des useState-Hooks.

Die Komponente muss Folgendes enthalten:

1. Eine Statusvariable namens likes. Ihr Anfangswert muss 120 sein.

2. Eine Überschrift (h2-Element). Ihr Textinhalt muss Exploring Iceland sein.

3. Ein Absatz (p-Element). Sein Textinhalt muss One of the most beautiful trips I've ever had. sein.

4. Ein weiterer Absatz (p-Element). Er muss Likes: gefolgt vom aktuellen Wert von likes anzeigen.

5. Eine Schaltfläche (button-Element). Ihr Textinhalt muss Like Post sein.

6. Beim Klicken auf die Schaltfläche soll der Status likes um 1 erhöht werden.

Startcode

Öffne das folgende Starterprojekt 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