Parentesi graffe negli attributi

Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 8 di 42.

Le parentesi graffe funzionano anche negli attributi. Sostituisci le virgolette con le parentesi graffe e il valore dell'attributo proviene da JavaScript:

const level = 'warning';

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

Ora la classe del paragrafo corrisponde al valore contenuto nella variabile: cambia level in 'error' e la classe si aggiorna di conseguenza. È così che le app React cambiano stile in base ai dati.

Fai attenzione alla sintassi: className={level}, senza virgolette intorno alle parentesi graffe. className="{level}" (con le virgolette) imposterebbe la classe sul testo letterale {level}.

Sfida

Facile

Il paragrafo di avviso dovrebbe ottenere la sua classe CSS dalla variabile level.

Imposta className del paragrafo sul valore di level usando le parentesi graffe (la sua classe deve risultare warning).
Non digitare la parola warning nell'attributo. Usa la variabile.

Provalo tu

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