Rendering elements in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this React component render?

Consider this React functional component. What will it display on the screen?

React

import React from 'react';

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

export default Greeting;

A Hello, Alice!

B Syntax error

C Hello, !

D Hello, {name}!

💡 Hint

Look at how JSX expressions inside curly braces are evaluated.

In JSX, expressions inside curly braces are evaluated. The variable 'name' holds 'Alice', so the component renders 'Hello, Alice!'.

📝 Syntax

intermediate

Which option correctly renders a list of items in React?

You want to render a list of fruits using React. Which code snippet will render the list correctly without errors?

React

const fruits = ['Apple', 'Banana', 'Cherry'];

function FruitList() {
  return (
    <ul>
      {/* Fill in here */}
    </ul>
  );
}

A fruits.map(fruit => <li>{fruit}</li>)

B fruits.forEach(fruit => <li>{fruit}</li>)

C fruits.map(fruit => <li key={fruits.indexOf(fruit)}>{fruit}</li>)

D fruits.map(fruit => <li key={fruit}>{fruit}</li>)

💡 Hint

Remember React requires a unique 'key' prop for list items.

Option D uses map to create list items and provides a unique 'key' prop using the fruit name, which is best practice. Option D misses the key prop, B uses forEach which returns undefined, and D uses indexOf which can cause issues if fruits repeat.

❓ state_output

advanced

What will be displayed after clicking the button twice?

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

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>
  );
}

export default Counter;

A Count: 2

B Count: 1

C Count: 0

D Count: 3

💡 Hint

React batches state updates and uses the current state value in closures.

Both setCount calls use the same 'count' value from the closure because state updates are asynchronous and batched. Each button click increases the count by 1 only. After two clicks, the count will be 2.

🔧 Debug

advanced

Why does this React component throw an error?

This component throws an error when rendered. What is the cause?

React

import React from 'react';

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

export default List;

A The <li> elements need a unique 'key' prop to render.

B The 'items' array is empty, so nothing renders.

C The arrow function in map lacks a return statement, so it returns undefined.

D JSX elements must be wrapped in a fragment <>...</> inside map.

💡 Hint

Check how arrow functions with curly braces behave regarding return values.

When using curly braces in arrow functions, you must explicitly return a value. Here, the function returns undefined, so React tries to render undefined, causing an error.

🧠 Conceptual

expert

What is the main reason React uses a virtual DOM?

Why does React use a virtual DOM instead of updating the real DOM directly every time?

A To batch and minimize real DOM updates for better performance.

B To allow React to run without a browser environment.

C To enable server-side rendering without client-side code.

D To store component state separately from the UI.

💡 Hint

Think about what makes updating the real DOM slow.

React uses a virtual DOM to compare changes and update only what is necessary in the real DOM, improving performance by reducing costly DOM operations.