Herausforderung: Implementierung der Bedingten Darstellung in Chat-Benachrichtigungen

Aufgabe: Erstellen einer Chat-Benachrichtigung

Es soll ein Mechanismus entwickelt werden, der eine Benachrichtigung nur dann anzeigt, wenn ein Benutzer ungelesene Nachrichten hat. Es wird überprüft, ob der Benutzer ungelesene Nachrichten besitzt. Ist diese Bedingung erfüllt, wird eine Benachrichtigung mit der Anzahl der Nachrichten angezeigt. Andernfalls wird nichts angezeigt.

Die Aufgabe lautet:

• Zwei Komponenten erstellen: App als übergeordnete Komponente und Notification als untergeordnete Komponente.
• Die übergeordnete Komponente App soll eine Prop namens messages an die untergeordnete Komponente übergeben. Die Prop messages ist ein Array, das Nachrichten enthält. In der untergeordneten Komponente muss die Länge des messages-Arrays überprüft werden.
• Wenn sich Nachrichten im Array befinden, soll eine Zeichenkette angezeigt werden: You have <amount> of unread messages. Das <amount> wird durch die tatsächliche Anzahl der ungelesenen Nachrichten ersetzt.

1. Um festzustellen, ob sich Nachrichten im Array befinden, kann die Eigenschaft length verwendet werden. Die Syntax lautet: array.length.
2. In React wird der Operator && genutzt, um die Logik einer if-Anweisung umzusetzen.
3. Um die Zeichenkette korrekt zu erstellen, wird der Platzhalter amount durch die tatsächliche Länge des Arrays ersetzt.
4. Mit geschweiften Klammern {array.length} wird die Array-Länge in die Zeichenkette eingefügt.