Schritt-für-Schritt-Anleitung – Arbeitsauftrag 4: Dynamische Sternenanzeige

Schritt-für-Schritt-Anleitung – Arbeitsauftrag 4: Dynamische Sternenanzeige

Ziel

Die Anzahl der goldenen Sterne oben in der App soll sich automatisch erhöhen, je mehr Aktivitäten ausgewählt wurden.
▶️ Eine Aktivität = ein Stern, maximal 5 Sterne.

Voraussetzungen

• Sie arbeiten in den Dateien App.js und StarsDisplay.js.
• Sie haben den State activityLog aus Arbeitsauftrag 3.
• Die Komponente StarsDisplay ist bereits eingebunden.

Umsetzung in 3 Schritten

1. Sternenzahl in App.js berechnen
   Fügen Sie oberhalb des return-Teils der App-Komponente folgenden Code ein:

   const starCount = Math.min(activityLog.length, 5);

   Erklärung:

   • 0 Aktivitäten → 0 Sterne
   • 3 Aktivitäten → 3 Sterne
   • Ab 5 Aktivitäten → maximal 5 Sterne
2. Sternenanzahl an StarsDisplay übergeben
   Wenn Sie StarsDisplay im JSX aufrufen, ergänzen Sie das neue Prop count:

   🔁 Alt:
   <StarsDisplay styles={styles} />
   
   ✅ Neu:
   <StarsDisplay styles={styles} count={starCount} />
   

   Damit weiß die Komponente, wie viele Sterne sie anzeigen soll.

3. StarsDisplay.js anpassen, damit count verwendet wird
   1. Funktionsdeklaration überprüfen:
      

      const StarsDisplay = ({ styles, count }) => {

      Falls count noch fehlt, ergänzen Sie es im Funktionskopf.
   2. Alle Verweise auf filledStars durch count ersetzen:
      

      🔁 Alt:
      name={index < filledStars ? 'star' : 'star-o'}
      color={index < filledStars ? 'gold' : '