Accolades dans les attributs

Fait partie de la section Les fondamentaux du Journey React de Coddy. Leçon 8 sur 42.

Les accolades fonctionnent aussi dans les attributs. Remplacez les guillemets par des accolades et la valeur de l'attribut provient de JavaScript :

const level = 'warning';

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

Désormais, la classe du paragraphe est la valeur contenue dans la variable : modifiez level en 'error' et la classe s'adapte en conséquence. C'est ainsi que les applications React changent de style en fonction des données.

Notez soigneusement la syntaxe : className={level}, sans guillemets autour des accolades. className="{level}" (avec des guillemets) définirait la classe avec le texte littéral {level}.

Défi

Facile

Le paragraphe d’alerte doit obtenir sa classe CSS à partir de la variable level.

Définis le className du paragraphe sur la valeur de level à l’aide d’accolades (sa classe doit finalement être warning).
N’écris pas le mot warning dans l’attribut. Utilise la variable.

Essayez vous-même

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