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éfinissez le className du paragraphe avec la valeur de level en utilisant des accolades (sa classe doit au final être warning).
N'écrivez pas le mot warning dans l'attribut. Utilisez 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>