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.