Llaves en atributos

Parte de la sección Fundamentos del Journey de React de Coddy — lección 8 de 42.

Las llaves también funcionan en los atributos. Cambia las comillas por llaves y el valor del atributo provendrá de JavaScript:

const level = 'warning';

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

Ahora la clase del párrafo es lo que contenga la variable: cambia level a 'error' y la clase cambia con ella. Así es como las aplicaciones de React cambian los estilos basándose en los datos.

Note cuidadosamente la sintaxis: className={level}, sin comillas alrededor de las llaves. className="{level}" (con comillas) establecería la clase con el texto literal {level}.

Desafío

Fácil

El párrafo alert debe obtener su clase CSS de la variable level.

Establece el className del párrafo con el valor de level usando llaves (su clase debe terminar siendo warning).
No escribas la palabra warning en el atributo. Usa la variable.

Pruébalo tú mismo

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