Flash cards
Review the key moves
What is the main idea behind React JSX Expressions?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___ Car() {Put the learning moves in the order that makes the concept easiest to apply.
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.
Example
Execute the expression 218 * 1.36 :
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 { } .
Use a variable inside JSX
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 { } .
Use a function inside JSX
function kwtohp(kw) {
return kw * 1.36;
}
function Car() {
return ( <> <h1>My car</h1> <p>It has {kwtohp(218)} horsepower</p> </> );
}Object Properties
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> </> );
}