Template Literals for Dynamic Classes

Snippet

Template Literals for Dynamic Classes

Template literals (using backticks ``) allow you to embed JavaScript expressions inside strings using ${}. This is very useful for creating dynamic CSS class names based on component props.

snippet.js
javascript
function Alert({ type, message }) {
  return (
    <div className={`alert alert-${type}`}>
      {message}
    </div>
  );
}

react

Breakdown

className={`alert alert-${type}`}

Combines static strings with the value of the 'type' variable to form a full class name.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Template Literals for Dynamic Classes

Related