Loading lesson path
One of the most powerful features of JSX is the ability to embed JavaScript expressions directly within your markup.
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.
Formula
218 * 1.36function Car() {
return (<>
Formula
< h1 > My car </h1 ><p>It has {218 * 1.36} horsepower</p></>
);
}Example »
Variables are also valid expressions. Insert variables in JSX by wrapping it in curly braces
{ }.function Car() {
const hp = 218 * 1.36;
return (<>
Formula
< h1 > My car </h1 ><p>It has {hp} horsepower</p></>
);
}Example »
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 (<>
Formula
< h1 > My car </h1 ><p>It has {kwtohp(218)} horsepower</p></>
);
}Example »
Refer to an object property inside JSX:
function Car() {
const myobj = {
name: "Fiat", model: "500", color: "white"
};
return (<>
<h1>My car is a {myobj.color} {myobj.name} {myobj.model}</h1></>
);
}Example »