React JSX Expressions

One of the most powerful features of JSX is the ability to embed JavaScript expressions directly within your markup.

Expressions

You can insert any valid JavaScript expression inside JSX by wrapping it in curly braces { }.

React will evaluate the expression and render the result in the DOM.

function Car() {
  return (
    <>
      <h1>My car</h1>
      <p>It has {218 * 1.36} horsepower</p>
    </>
  );
}

Variables

Variables are also valid expressions. Insert variables in JSX by wrapping it in curly braces { }.

function Car() {
  const hp = 218 * 1.36;
  return (
    <>
      <h1>My car</h1>
      <p>It has {hp} horsepower</p>
    </>
  );
}

Function Calls

Function calls are valid expressions. Insert function calls in JSX by wrapping it in curly braces { }.

function kwtohp(kw) {
  return kw * 1.36;
}

function Car() {
  return (
    <>
      <h1>My car</h1>
      <p>It has {kwtohp(218)} horsepower</p>
    </>
  );
}

Object Properties

Access object properties within JSX:

function Car() {
  const myobj = {
    name: "Fiat",
    model: "500",
    color: "white"
  };
  return (
    <>
      <h1>My car is a {myobj.color} {myobj.name} {myobj.model}</h1>
    </>
  );
}