JSX syntax rules in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this JSX component?

Consider this React component. What will it render in the browser?

React

function Greeting() {
  const name = "Alex";
  return <h1>Hello, {name}!</h1>;
}

A Hello, Alex!

B <h1>Hello, {name}!</h1>

C <h1>Hello, Alex!</h1>

D Error: JSX expressions must have one parent element

💡 Hint

Remember that JSX expressions inside curly braces are evaluated as JavaScript.

The JSX expression {name} is replaced by the value of the variable name, which is "Alex". So the component renders an h1 element with the text "Hello, Alex!".

📝 Syntax

intermediate

Which JSX snippet is syntactically correct?

Select the JSX code that will compile without syntax errors.

A <div><p>Paragraph 1</p><p>Paragraph 2</p></div></div>

B <div><p>Paragraph 1</p><p>Paragraph 2</p></div>

C <div><p>Paragraph 1</p><p>Paragraph 2</p>

D <div><p>Paragraph 1</p><p>Paragraph 2</div>

💡 Hint

JSX requires all tags to be properly closed and nested.

Option B has properly nested and closed tags. Options B and C have missing closing tags, and D has an extra closing tag.

❓ state_output

advanced

What is the rendered output after clicking the button once?

Given this React component, what will be the displayed count after clicking the button once?

React

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase</button>
    </div>
  );
}

A Count: 1

B Count: 0

C Count: 2

D Count: 3

💡 Hint

Remember that React state updates may be batched and asynchronous.

Both setCount calls use the same stale count value (0), so the count only increases by 1 after the click.

🔧 Debug

advanced

Which JSX code causes a syntax error?

Identify the JSX snippet that will cause a syntax error when compiled.

A <div><p>Hello</p></div>

B <input type="text" disabled />

C <img src="image.png"></img>

D <button onClick={() => alert('Hi')}>Click me</button>

💡 Hint

Check if all tags are properly nested and closed.

Option A has incorrectly nested tags: the

tag is closed after the

, which is invalid in JSX.

🧠 Conceptual

expert

What error does this JSX code produce?

What error will this React component cause when rendered?

React

function List() {
  const items = ["a", "b", "c"];
  return (
    <ul>
      {items.map(item => <li>{item}</li>)}
    </ul>
  );
}

A No error, renders list correctly

B SyntaxError: Unexpected token <

C TypeError: items.map is not a function

D Warning: Each child in a list should have a unique "key" prop.

💡 Hint

React requires a special prop when rendering lists to help identify items.

React warns when list items lack a unique key prop to optimize rendering updates.

Practice

1. Which of the following is correct JSX syntax for embedding a JavaScript expression inside HTML?

easy

A. <h1>Hello, {name}!</h1>

B. <h1>Hello, (name)!</h1>

C. <h1>Hello, $name!</h1>

D. <h1>Hello, &{name}!</h1>

Solution

1. Step 1: Understand JSX expression embedding

   JSX uses curly braces {} to embed JavaScript expressions inside HTML-like code.

2. Step 2: Check each option for correct syntax

   <h1>Hello, {name}!</h1> correctly uses curly braces around the variable name. The other options use invalid syntax for embedding expressions.

3. Final Answer:

   <h1>Hello, {name}!</h1> -> Option A

4. Quick Check:

   Curly braces for JS expressions = <h1>Hello, {name}!</h1> [OK]

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

Common Mistakes:

• Using parentheses () instead of curly braces
• Using $ sign like template strings inside JSX
• Adding extra symbols like & before curly braces

2. Which JSX snippet is syntactically correct?

easy

A. <p>Hello<p>

B. <div><img src='logo.png'></div>

C. <input type='text' />

D. <br>

Solution

1. Step 1: Check self-closing tags in JSX

   In JSX, tags like input, img, and br must be self-closed with a slash /.

2. Step 2: Validate each option

   <input type='text' /> correctly self-closes input. <div><img src='logo.png'></div> misses self-closing on img. <p>Hello<p> has an unclosed p tag. <br> misses self-closing on br.

3. Final Answer:

   <input type='text' /> -> Option C

4. Quick Check:

   Self-close void tags with / = <input type='text' /> [OK]

Hint: Always self-close void tags like in JSX [OK]

Common Mistakes:

• Forgetting the slash on self-closing tags
• Leaving tags unclosed
• Using HTML void tags without self-closing

3. What will this JSX code render?

const name = 'Alice';
const element = <div>Hello, {name.toUpperCase()}!</div>;

medium

A. <div>Hello, Alice!</div>

B. <div>Hello, ALICE!</div>

C. <div>Hello, {name.toUpperCase()}!</div>

D. SyntaxError

Solution

1. Step 1: Evaluate the JavaScript expression inside JSX

   The expression {name.toUpperCase()} calls the toUpperCase() method on the string 'Alice', resulting in 'ALICE'.

2. Step 2: Understand JSX rendering

   JSX replaces the expression with its evaluated result, so the rendered output is <div>Hello, ALICE!</div>.

3. Final Answer:

   <div>Hello, ALICE!</div> -> Option B

4. Quick Check:

   JS expression evaluated = <div>Hello, ALICE!</div> [OK]

Hint: JSX renders evaluated expressions, not raw code [OK]

Common Mistakes:

• Expecting JSX to show raw JavaScript code
• Confusing string methods inside JSX
• Thinking JSX does not evaluate expressions

4. Identify the error in this JSX code:

const element = <div>
  <p>Welcome</p>
  <p>User</p>
</div>;

const wrongElement = <p>Hello</p>
<p>World</p>;

medium

A. JSX expressions cannot contain multiple <p> tags

B. JSX requires all tags to be self-closing

C. JSX does not allow text inside <p> tags

D. JSX must have only one parent element per block

Solution

1. Step 1: Analyze the JSX structure

   The first element uses a single parent div wrapping two p tags, which is correct. The second snippet has two sibling p tags without a parent wrapper.

2. Step 2: Recall JSX rules about parent elements

   JSX requires one parent element per block. Multiple sibling elements must be wrapped in a single parent or a fragment.

3. Final Answer:

   JSX must have only one parent element per block -> Option D

4. Quick Check:

   One parent element rule = JSX must have only one parent element per block [OK]

Hint: Wrap multiple JSX elements in one parent tag [OK]

Common Mistakes:

• Leaving sibling JSX elements unwrapped
• Thinking multiple root elements are allowed
• Confusing self-closing tags with parent wrapping

5. You want to render a list of names inside a JSX component. Which snippet correctly uses JSX syntax to do this?

const names = ['Anna', 'Bob', 'Cara'];

A) <ul>{names.map(name => <li>{name}</li>)}</ul>

B) <ul>{names.forEach(name => <li>{name}</li>)}</ul>

C) <ul>{names.map(name => <li>name</li>)}</ul>

D) <ul>{names.map(name => <li>{name.toUpperCase()}</li>)}</ul>

hard

A. Correctly maps names to list items with JSX expressions

B. Uses forEach which returns undefined, so no list items render

C. Does not embed the variable, so 'name' is rendered literally

D. Maps names but transforms them to uppercase before rendering

Solution

1. Step 1: Understand how to render lists in JSX

   Use map to transform array items into JSX elements. Each item must be embedded inside curly braces.

2. Step 2: Evaluate each option

   The snippet {names.map(name => <li>{name}</li>)} correctly uses map and embeds {name}. The forEach snippet returns undefined, so no list items render. The snippet <li>name</li> renders the literal string 'name' because it lacks curly braces. The toUpperCase() snippet uses valid JSX syntax but transforms names to uppercase, which is not the original list.

3. Final Answer:

   Correctly maps names to list items with JSX expressions -> Option A

4. Quick Check:

   Use map with curly braces for list rendering = Correctly maps names to list items with JSX expressions [OK]

Hint: Use map with curly braces to render lists in JSX [OK]

Common Mistakes:

• Using forEach instead of map for rendering
• Forgetting curly braces around variables
• Rendering variable names as plain text