JIYIK CN >

Use template literals to concatenate strings in React attributes, for example <div className={border ${myClass}}>. Template literals are delimited with backticks and allow us ${expression}to embed variables and expressions using the dollar sign and curly brace syntax.

import './App.css';
export default function App() {
  const myClass = 'bg-salmon';
  const num = 30;
  return (
    <div>
      <div className={`text-white ${myClass}`}>Hello world</div>
      <br />
      <div className={`text-white ${'hi'.length === 2 ? 'bg-salmon' : ''}`}>
        Hello world
      </div>
      <h2
        style={{
          padding: `${num + num}px`,
          backgroundColor: 'lime',
        }}
      >
        Hello world
      </h2>
    </div>
  );
}

Here is an example of CSS.

.bg-salmon {
  background-color: salmon;
}
.text-white {
  color: white;
}

We can use template literals to concatenate strings and variables in React props.

\Note that the string is enclosed in backticks `` rather than single quotes.

The dollar sign and curly brace syntax allows us to use placeholders that are evaluated.

<div className={`text-white ${myClass}`}>
  Hello world
</div>
<div className={`text-white ${'hi'.length === 2 ? 'bg-salmon' : ''}`}>
  Hello world
</div>

The curly braces that we wrap the template literal in mark the beginning of the expression that must be evaluated.

The code between the opening and closing curly braces is just JavaScript, so any variables or expressions we use in the template literal will be evaluated.

The second example in the code snippet uses the ternary operator.

const color1 = 'blue';
const color2 = 'red';
const result = `${color1.length > color2.length ? color1 : color2}`;
console.log(result); // 👉️ blue

The ternary operator is basically a _ if/elsestatement. The part before the question mark is evaluated, and if it returns a true value, the operator returns the value before the colon, otherwise it returns the value after the colon.

import './App.css';
export default function App() {
  return (
    <div>
      <div className={`text-white ${'hi'.length === 2 ? 'bg-salmon' : ''}`}>
        Hello world
      </div>
    </div>
  );
}

The ternary operator in the example checks if the length of the string hi is equal to 2 and if so, returns the string bg-salmon , otherwise it returns the empty string.