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.

Practice

1. In React JSX, how do you embed a JavaScript variable name inside a <p> tag to display it?

easy

A. name

B. {name}

C. ${name}

D. \{name\}

Solution

1. Step 1: Understand JSX embedding syntax

   In JSX, JavaScript expressions must be wrapped in curly braces {} to be evaluated and rendered.

2. Step 2: Apply embedding to variable

   To display the variable name, write it inside curly braces within the JSX tag: {name}.

3. Final Answer:

   <p>{name}</p> -> Option B

4. Quick Check:

   Use curly braces {} to embed variables [OK]

Hint: Use curly braces {} to embed variables in JSX [OK]

Common Mistakes:

• Using quotes instead of curly braces
• Trying to use template literals inside JSX directly
• Escaping curly braces incorrectly

2. Which of the following is the correct way to embed a JavaScript expression that adds two numbers inside JSX?

easy

A. {2 + 3}

B. 2 + 3

C. ${2 + 3}

D. {'2 + 3'}

Solution

1. Step 1: Recognize expression embedding

   JSX requires expressions inside curly braces to evaluate them, so {2 + 3} will calculate the sum.

2. Step 2: Identify correct syntax

   {2 + 3} correctly uses curly braces with the expression 2 + 3. Other options treat it as plain text or incorrect syntax.

3. Final Answer:

   <div>{2 + 3}</div> -> Option A

4. Quick Check:

   Curly braces evaluate expressions in JSX [OK]

Hint: Wrap expressions in {} to evaluate inside JSX [OK]

Common Mistakes:

• Putting expressions as plain text without braces
• Using template literals without braces
• Wrapping expressions in quotes

3. What will be rendered by this React component?

function Greeting() {
  const hour = 10;
  return <h1>Good {hour < 12 ? 'Morning' : 'Evening'}!</h1>;
}

medium

A. Good {hour < 12 ? 'Morning' : 'Evening'}!

B. Good Evening!

C. SyntaxError

D. Good Morning!

Solution

1. Step 1: Evaluate the conditional expression

   The variable hour is 10, which is less than 12, so the condition hour < 12 is true.

2. Step 2: Determine the rendered string

   Because the condition is true, the expression returns 'Morning', so the rendered output is <h1>Good Morning!</h1>.

3. Final Answer:

   <h1>Good Morning!</h1> -> Option D

4. Quick Check:

   Conditional expression inside {} renders correct text [OK]

Hint: Evaluate expressions inside {} before rendering [OK]

Common Mistakes:

• Thinking JSX shows raw expressions
• Confusing true/false in ternary
• Missing curly braces for expressions

4. Identify the error in this JSX snippet:

const count = 5;
return <div>You have {count} new messages</div>;

medium

A. No error, code is correct

B. Missing curly braces around count

C. JSX must use parentheses around return value

D. Curly braces should be escaped

Solution

1. Step 1: Check expression embedding

   The variable count is correctly embedded inside curly braces {count} within JSX.

2. Step 2: Verify JSX syntax

   The JSX syntax is valid; parentheses around return are optional for single-line JSX.

3. Final Answer:

   No error, code is correct -> Option A

4. Quick Check:

   Curly braces correctly embed variables in JSX [OK]

Hint: Curly braces embed variables; parentheses optional for single JSX line [OK]

Common Mistakes:

• Thinking parentheses are mandatory for return
• Trying to escape curly braces unnecessarily
• Omitting curly braces around variables

5. Given this React component, what will be the output?

function ListItems() {
  const items = ['Apple', 'Banana', 'Cherry'];
  return (
    <ul>
      {items.map(item => <li key={item}>{item.length > 5 ? item : 'Short'}</li>)}
    </ul>
  );
}

hard

A. ShortShortShort

B. AppleBananaCherry

C. ShortBananaCherry

D. Runtime error due to missing keys

Solution

1. Step 1: Evaluate each item length

   Items are 'Apple'(5), 'Banana'(6), 'Cherry'(6). The condition item.length > 5 is true for 'Banana' and 'Cherry', false for 'Apple'.

2. Step 2: Apply conditional rendering

   For 'Apple', length is 5 (not > 5), so it renders 'Short'. For 'Banana' and 'Cherry', it renders the item name.

3. Step 3: Check keys and JSX structure

   Each <li> has a unique key from the item string, so no error occurs.

4. Final Answer:

   <ul><li>Short</li><li>Banana</li><li>Cherry</li></ul> -> Option C

5. Quick Check:

   Conditional expression inside map renders correct list [OK]

Hint: Check condition inside map for each item before rendering [OK]

Common Mistakes:

• Assuming all items render their names
• Forgetting to add keys in list items
• Confusing length comparison operator