Nawiasy klamrowe w atrybutach

Część sekcji Podstawy ścieżki React w Coddy. Lekcja 8 z 42.

Nawiasy klamrowe działają również w atrybutach. Zamień cudzysłowy na nawiasy klamrowe, a wartość atrybutu będzie pochodzić z JavaScriptu:

const level = 'warning';

return <p className={level}>Check this!</p>;

Klasa akapitu jest teraz taka, jaką wartość przechowuje zmienna: zmień level na 'error', a klasa się zmieni. Tak aplikacje React przełączają style na podstawie danych.

Zwróć szczególną uwagę na składnię: className={level}, bez cudzysłowów wokół nawiasów klamrowych. className="{level}" (z cudzysłowami) ustawiłoby klasę na dosłowny tekst {level}.

Wyzwanie

Łatwy

Akapit alertu powinien pobierać swoją klasę CSS ze zmiennej level.

Ustaw className akapitu na wartość zmiennej level, używając nawiasów klamrowych (jego klasa powinna ostatecznie mieć wartość warning).
Nie wpisuj słowa warning w atrybucie. Użyj zmiennej.

Spróbuj swoich sił

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>