# Uppgift

Skapa en återanvändbar `StatusCard`-komponent som visar olika meddelanden baserat på `online`-propet.

`StatusCard`-komponenten ska innehålla:

1. En rubrik (`h2`-element). Dess textinnehåll ska visa `name`-propet.

2. Ett stycke (`p`-element).

   * Om `online`-propet är `true`, visa `Online`;
* Annars, visa `Offline`.

`App`-komponenten renderar redan flera `StatusCard`-komponenter med olika propvärden.


## Startkod
Öppna startprojektet nedan och fyll i de saknade delarna av komponenten.

[Starter code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-03-starter-show-user-status-messages?file=src%2FApp.jsx)



## Lösning

Du kan jämföra ditt resultat med den slutgiltiga lösningen nedan.

[Solution code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-03-solution-show-user-status-messages?file=src%2FApp.jsx)

Utforska grunderna i att bygga användargränssnitt med React. Fokus på komponenter, JSX, dataflöde, tillstånd och sid-effekter som används i vardagliga React-applikationer.

Utforska vad React är och hur det renderar användargränssnitt. Fokus på komponenter, JSX-syntax och visning av element på skärmen.

Vilken metod används oftast för att rendera en lista med objekt i React?

Varför är key-propen viktig när man renderar listor?

Fördjupning i att överföra data mellan komponenter och styra UI-utdata. Fokus på props, villkorlig rendering och rendering av listor med data.

Lär dig hur användarinteraktioner och extern data förändrar användargränssnittet över tid. Fokus på hantering av tillstånd och bieffekter med React hooks.

Utforska vanliga metoder för att styla React-komponenter. Fokus på att tillämpa stilar med inline-stilar och extern CSS.

Lär dig hur du kör ett React-projekt och förstår dess struktur. Fokus på att starta ett projekt med Vite och navigera bland projektfilerna.

Utmaning: Visa användarstatusmeddelanden

Uppgift

Startkod

Lösning