Using JavaScript Expressions in JSX

What happens when you want to intermingle real JavaScript code within JSX? To write a JavaScript expression within JSX you will have to surround the JavaScript code in { } brackets.

In the React/JSX code below I am mixing JavaScript expressions (e.g. 2+2), surround by { } among the JSX that will eventually get evaluated by JavaScript.

The JSX transformation will result in the follow:

var label = '2 + 7';
var inputType = 'input';

var reactNode = React.createElement(
  'label',
  null,
  label,
  ' = ',
  React.createElement('input', { type: inputType, value: 2 + 7 })
);

ReactDOM.render(reactNode, document.getElementById('app'));

Once this code is parsed by a JavaScript engine (i.e. a browser) the JavaScript expressions are evaluated and the resulting HTML will look like so:

<div id="app">
  <label data-reactid=".0"><span data-reactid=".0.0">2 + 7</span><span data-reactid=".0.1"> = </span><input type="input" value="9" data-reactid=".0.2"></label>
</div>

Nothing that complicated is going on here once you realize that the brackets basically escape the JSX. The { } brackets simply tells JSX that the content is JavaScript so leave it alone so it can eventually be parsed by a JavaScript engine (e.g. 2+7). Note that { } brackets can be used anywhere among the JSX expressions as long as the result is valid JavaScript.

Note:

  • If you have to escape brackets (i.e. you want brackets in a string) use {'{}'}.

Updated: