Chaves em Atributos

Parte da seção Fundamentos do Journey de React da Coddy — lição 8 de 42.

Chaves funcionam em atributos também. Troque as aspas por chaves e o valor do atributo virá do JavaScript:

const level = 'warning';

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

Agora a classe do parágrafo é o que quer que a variável contenha: altere level para 'error' e a classe acompanhará a mudança. É assim que os aplicativos React alternam estilos com base em dados.

Observe a sintaxe com atenção: className={level}, sem aspas ao redor das chaves. className="{level}" (com aspas) definiria a classe para o texto literal {level}.

Desafio

Fácil

O parágrafo de alerta deve obter sua classe CSS a partir da variável level.

Defina o className do parágrafo para o valor de level usando chaves (sua classe deve resultar em warning).
Não digite a palavra warning no atributo. Use a variável.

Experimente você mesmo

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