Embedding expressions in JSX in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React component?

Consider the following React component. What will it render inside the <div>?

React

import React from 'react';

function Greeting() {
  const name = 'Alice';
  const age = 25;
  return <div>Hello, {name}! You are {age} years old.</div>;
}

export default Greeting;

A Hello, {name}! You are {age} years old.

B Hello, Alice! You are 25 years old.

C Hello, Alice! You are {age} years old.

D Hello, {name}! You are 25 years old.

💡 Hint

Remember that expressions inside curly braces in JSX are evaluated and replaced with their values.

In JSX, expressions inside curly braces are evaluated. So {name} becomes 'Alice' and {age} becomes 25, producing the full string.

📝 Syntax

intermediate

Which JSX expression is valid to embed a JavaScript expression?

Which of the following JSX snippets correctly embeds a JavaScript expression to show the sum of 2 + 3?

A <div>{2 + '3'}</div>

B <div>2 + 3</div>

C <div>{'2 + 3'}</div>

D <div>{2 + 3}</div>

💡 Hint

JSX expressions inside curly braces are evaluated as JavaScript.

Option D evaluates 2 + 3 to 5 and renders it. Option D renders the string '2 + 3'. Option D renders the string '2 + 3'. Option D concatenates number 2 and string '3' to '23'.

❓ state_output

advanced

What will be displayed after clicking the button once?

Given this React component, what text will appear inside the <div> after clicking the button once?

React

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <div>Count: {count}</div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}

export default Counter;

A Count: 1

B Count: 0

C Count: undefined

D Count: NaN

💡 Hint

Clicking the button calls setCount with count + 1, updating the state.

Initially count is 0. Clicking the button increases count to 1, so the div shows 'Count: 1'.

🔧 Debug

advanced

Why does this JSX code cause an error?

Examine this JSX snippet. Why does it cause a syntax error?

React

const element = <div>{if (true) { 'Yes' } else { 'No' }}</div>;

A JSX expressions cannot contain statements like if; only expressions are allowed.

B The curly braces are missing around the if statement.

C The strings 'Yes' and 'No' must be wrapped in parentheses.

D JSX requires a semicolon after the if statement inside curly braces.

💡 Hint

JSX expressions expect a single JavaScript expression, not statements.

The if statement is a JavaScript statement, not an expression. JSX curly braces only accept expressions like ternary operators.

🧠 Conceptual

expert

What is the value of 'result' after rendering this React component?

Consider this React component. What is the value of the variable 'result' after the component renders?

React

import React from 'react';

function Example() {
  const a = 5;
  const b = 10;
  const result = <>{a > b ? 'Greater' : a < b ? 'Smaller' : 'Equal'}</>;
  return <div>{result}</div>;
}

export default Example;

A Greater

B Equal

C Smaller

D undefined

💡 Hint

The expression uses nested ternary operators to compare a and b.

Since 5 is less than 10, the expression evaluates to 'Smaller'.