Creating first React app - Practice Exercises

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this React component display?

Consider this React functional component. What text will appear on the screen when it renders?

React

import React from 'react';

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

A Error: name is not defined

B Hello, Alex!

C Hello, name!

D Hello, {name}!

💡 Hint

Look at how JavaScript variables are used inside JSX with curly braces.

The component uses curly braces to insert the value of the name variable inside the JSX. So it shows 'Hello, Alex!'.

📝 Syntax

intermediate

Which option correctly defines a React functional component?

Choose the option that correctly defines a React functional component named Welcome that returns a <div> with text 'Welcome!'.

A const Welcome = () => <div>Welcome!</div>;

B function Welcome() { return <div>Welcome!</div>; }

C const Welcome = () => { <div>Welcome!</div> }

D function Welcome() { <div>Welcome!</div> }

💡 Hint

Remember that arrow functions need to return JSX explicitly or implicitly.

Option A uses an arrow function with implicit return of JSX, which is correct. Option A is valid JavaScript but lacks export or const, so less preferred. Options B and D miss return statements causing errors.

❓ state_output

advanced

What is the displayed count after clicking the button twice?

This React component uses state. What number will show after clicking the button two times?

React

import React, { useState } from 'react';

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

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Add 2</button>
    </div>
  );
}

A Count: 3

B Count: 2

C Count: 0

D Count: 1

💡 Hint

Remember React state updates are asynchronous and batched.

In the increment function, both setCount(count + 1) calls capture the same current count value due to closure and batching. Thus, each button click increases the count by 1 only. After two clicks, the count is 2.

🔧 Debug

advanced

Why does this React component produce a console warning?

This component produces a console warning when rendered. What is the cause?

React

import React from 'react';

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

A Missing unique 'key' prop on list items

B Array 'items' is not defined

C JSX elements must be wrapped in a single parent element

D map function is not valid inside JSX

💡 Hint

React requires a special prop for lists to track items efficiently.

React needs a unique key prop on each list item to identify elements during updates. Missing keys cause warnings.

🧠 Conceptual

expert

What happens if you call a React hook conditionally inside a component?

Consider this code snippet inside a React functional component:

if (someCondition) {
  const [value, setValue] = useState(0);
}

What is the result of calling a hook conditionally like this?

A React automatically adjusts hook calls based on conditions

B The hook works fine only when someCondition is true

C React throws an error because hooks must be called unconditionally in the same order

D The hook is ignored when someCondition is false, no error occurs

💡 Hint

Hooks rely on consistent call order between renders.

React hooks must be called in the same order on every render. Calling them conditionally breaks this rule and causes errors.