Learn TypeScript 3 by Building Web Applications

Expressions

Within JSX, we can embed expressions using curly braces.

Here's an example:

const name = 'Foo'; 
const element = <h1>Hello, {name}</h1>; // we use JSX to create a React element 
 
ReactDOM.render( 
  element, // then we render it 
  document.getElementById('root') 
); 

In this example, we have defined a constant and have embedded it inside of our JSX code. JSX supports all valid JavaScript expressions within curly braces.

For example, we could also call a function:

function getName() { return 'foo'; } 
 
const element = <h1>Hello, {getName()}</h1>; 

Moreover, since JSX code is transpiled into standard JavaScript function calls, it can be used and passed around just like any JavaScript function can (for example, passed as a function argument, ...