Kurung Kurawal dalam Atribut

Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 8 dari 42.

Kurung kurawal juga berfungsi dalam atribut. Ganti tanda kutip dengan kurung kurawal, lalu nilai atribut berasal dari JavaScript:

const level = 'warning';

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

Sekarang class paragraf mengikuti nilai yang disimpan variabel: ubah level menjadi 'error' dan class-nya akan mengikuti. Beginilah aplikasi React mengganti style berdasarkan data.

Perhatikan sintaksnya dengan saksama: className={level}, tanpa tanda kutip di sekitar kurung kurawal. className="{level}" (dengan tanda kutip) akan menetapkan class ke teks literal {level}.

Tantangan

Mudah

Paragraf peringatan harus mendapatkan class CSS-nya dari variabel level.

Atur className paragraf ke nilai level menggunakan kurung kurawal (class-nya harus menjadi warning).
Jangan ketik kata warning di atribut. Gunakan variabelnya.

Coba sendiri

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