Aufgabe: Zwei Buttons für unterschiedliche Aktionen (Komponenten auslagern)

Aufgabe: Zwei Buttons für unterschiedliche Aktionen (Komponenten auslagern)

Öffnen Sie den vorhandenen Code: LS_2_1_2 – Grundlagen der Ereignisverarbeitung in Snack Expo. (ZIP-Archiv)

Erstellen Sie eine neue Datei mit dem Namen ButtonComponent.js. In dieser Datei sollen zwei Buttons eingefügt werden:

• Ein Button, der den Text auf „Hallo, Welt!“ setzt.
• Ein Button, der den Text zurücksetzt.

Definieren Sie in Ihrer App.js zwei Funktionen:

• handleSetText – setzt den Text auf „Hallo, Welt!“
• handleClearText – setzt den Text auf leer

Übergeben Sie diese Funktionen als props an die neue Komponente ButtonComponent.js. Die Buttons sollen bei Klick die jeweilige Aktion auslösen.

Testen Sie abschließend Ihre App auf dem Gerät. Funktionieren beide Buttons wie gewünscht?

Falls Sie Unterstützung brauchen, bearbeiten Sie zunächst die Testfragen zur Vorbereitung.