Özniteliklerde Süslü Parantez Kullanımı

Coddy'nin React Journey'sinin Temeller bölümünün bir parçası — ders 8 / 42.

Süslü parantezler özniteliklerde de çalışır. Tırnak işaretlerini süslü parantezler ile değiştirin; öznitelik değeri JavaScript'ten gelir:

const level = 'warning';

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

Artık paragrafın sınıfı, değişkenin tuttuğu değer neyse odur: level değerini 'error' olarak değiştirin ve sınıf onu takip etsin. React uygulamaları stilleri veriye göre bu şekilde değiştirir.

Sözdizimine dikkat edin: className={level}, süslü parantezlerin etrafında tırnak işareti yok. className="{level}" (tırnak işaretleri ile) sınıfı kelimenin tam anlamıyla {level} metnine ayarlar.

Görev

Kolay

Uyarı paragrafı, CSS sınıfını level değişkeninden almalıdır.

Süslü parantezler kullanarak paragrafın className değerini level değişkeninin değerine ayarlayın (sınıfı en sonunda warning olmalıdır).
Özniteliğin içine warning sözcüğünü yazmayın. Değişkeni kullanın.

Kendin dene

<!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>