Episode 4 of 32

Dynamic Values in Templates

Learn how to output dynamic values and JavaScript expressions inside JSX templates.

JSX lets you embed dynamic JavaScript expressions using curly braces.

Outputting Variables

function App() {
  const title = "My Blog";
  const likes = 50;
  const link = "https://example.com";

  return (
    <div>
      <h1>{title}</h1>
      <p>Liked {likes} times</p>
      <a href={link}>Visit</a>
      <p>{10 + 20}</p>
      <p>{Math.random() * 100}</p>
    </div>
  );
}

What You Cannot Output

Objects and booleans cannot be rendered directly — only strings, numbers, and arrays.