Bugl — code interview practice that feels like a game

Loading lesson path

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind React JSX If Statements?

Lesson checks

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

___ Fruit() {

3Order

Put the learning moves in the order that makes the concept easiest to apply.

To be able to use conditional statements in JSX, you should put the if statements outside of the JSX, or you could use a ternary expression instead:

React supports if statements, but not inside JSX.

Conditions - if statements

React supports if statements, but not inside JSX.

To be able to use conditional statements in JSX, you should put the if statements outside of the JSX, or you could use a ternary expression instead:

Write if statements outside of the JSX code:

Example

Write "Banana" if x is less than 10, otherwise "Apple":

function Fruit() {
 const x = 5;
 let y = "Apple";
 if (x < 10) {
 y = "Banana";
 }
 return ( <h1>{y}</h1> );
}

Example

Write "Banana" if x is less than 10, otherwise "Apple":

function Fruit() {
 const x = 5;
 return ( <h1>{(x) < 10 ? "Banana" : "Apple"}</h1> );
}

Note that in order to embed a JavaScript expression inside JSX, the JavaScript must be wrapped with curly braces, {} .