Embedding expressions in JSX in React - Mini Project: Build & Apply

Embedding expressions in JSX

📖 Scenario: You are building a simple React component that shows a greeting message with a user's name and the current year.

🎯 Goal: Create a React functional component that uses JSX expressions to embed variables and JavaScript expressions inside the rendered output.

📋 What You'll Learn

Create a variable with the user's name

Create a variable with the current year

Use JSX expressions to embed these variables inside the returned JSX

Render a greeting message that includes the user's name and the current year

💡 Why This Matters

🌍 Real World

Embedding expressions in JSX is how React components show dynamic data, like user names, dates, or calculated values, making web pages interactive and personalized.

💼 Career

React developers frequently embed JavaScript expressions in JSX to build user interfaces that update automatically based on data or user input.

1

Create user name variable

Create a variable called userName and set it to the string "Alice" inside the Greeting component.

React

import React from 'react';

export default function Greeting() {
  // Create userName variable here
  
  return (
    
      {/* Greeting message will go here */}
    
  );
}

Hint

Use const userName = "Alice"; inside the component function.

2

Create current year variable

Add a variable called currentYear and set it to the number 2024 inside the Greeting component, below userName.

React

import React from 'react';

export default function Greeting() {
  const userName = "Alice";
  // Create currentYear variable here
  
  return (
    
      {/* Greeting message will go here */}
    
  );
}

Hint

Use const currentYear = 2024; below userName.

3

Embed expressions in JSX

Inside the return statement, replace the comment with a <p> element that uses JSX expressions to embed userName and currentYear in this exact text: Hello, Alice! Welcome to the year 2024.

React

import React from 'react';

export default function Greeting() {
  const userName = "Alice";
  const currentYear = 2024;
  
  return (
    
      {/* Replace this comment with a  element embedding userName and currentYear */}
    
  );
}

Hint

Use curly braces {} inside JSX to embed variables like {userName} and {currentYear}.

4

Complete component export

Ensure the component is exported as the default export with the exact name Greeting.

React

import React from 'react';

// Ensure default export of Greeting component

export default function Greeting() {
  const userName = "Alice";
  const currentYear = 2024;
  
  return (
    
      Hello, {userName}! Welcome to the year {currentYear}.
    
  );
}

Hint

Make sure the component is exported with export default function Greeting().

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