Embedding expressions in JSX in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is JSX in React?

JSX is a syntax that looks like HTML but is used in React to describe the UI structure. It lets you write HTML-like code inside JavaScript.

beginner

How do you embed a JavaScript expression inside JSX?

You embed JavaScript expressions inside JSX by wrapping them in curly braces {}.

intermediate

Can you embed statements like if or for loops directly inside JSX?

No, you cannot embed statements like if or for loops directly inside JSX. You can use expressions like ternary operators or call functions that return JSX instead.

intermediate

What happens if you embed a JavaScript expression that returns null or false in JSX?

If a JavaScript expression returns null or false inside JSX, React will render nothing for that part. This is useful for conditional rendering.

beginner

Example: What will this JSX render? {`

{2 + 3}

`}

It will render an <h1> element with the number 5 inside because the expression 2 + 3 is evaluated to 5.

How do you insert a JavaScript variable named 'name' inside JSX?

A <code>$(name)</code>

B <code>{name}</code>

C <code>&name;</code>

D <code>name</code>

You use curly braces {} to embed JavaScript expressions inside JSX, so {name} inserts the variable's value.

Which of these can you NOT directly put inside JSX curly braces?

A An if statement

B A function call that returns JSX

C A JavaScript expression like 5 + 3

D A variable holding a string

JSX curly braces accept expressions, but statements like if cannot be used directly. Use ternary or functions instead.

What will React render if the expression inside JSX returns false?

A The word 'false'

B The string 'false' as text

C Nothing (no output)

D An error

React treats false, null, and undefined as nothing and renders no output for those expressions.

Which syntax correctly embeds the result of 10 * 2 inside a paragraph in JSX?

A <p>(10 * 2)</p>

B <p>10 * 2</p>

C <p>${10 * 2}</p>

D <p>{10 * 2}</p>

Curly braces {} are used to embed JavaScript expressions inside JSX elements.

To conditionally render 'Hello' or 'Goodbye' inside JSX, which is correct?

A <div>{isHello ? 'Hello' : 'Goodbye'}</div>

B <div>{if (isHello) 'Hello' else 'Goodbye'}</div>

C <div>{isHello && 'Hello' || 'Goodbye'}</div>

D <div>{isHello ? 'Hello'}</div>

Ternary operator inside curly braces is the correct way to conditionally render in JSX.

Explain how to embed JavaScript expressions inside JSX and why curly braces are used.

Think about how you mix JavaScript and HTML-like code in React.

Describe how to conditionally render content inside JSX without using if statements directly.

Remember JSX only accepts expressions, not statements.