← Back to all tutorials

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.