useState hook introduction in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the useState hook from React.

React

import React, { [1] } from 'react';

Drag options to blanks, or click blank then click option'

AuseState

BuseRef

CuseContext

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the wrong hook like useEffect or useContext.

Forgetting to import useState at all.

The useState hook is imported from React to manage state in functional components.

2fill in blank

medium

Complete the code to declare a state variable called count with initial value 0.

React

const [count, setCount] = [1](0);

Drag options to blanks, or click blank then click option'

AuseRef

BuseEffect

CuseState

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect or other hooks instead of useState.

Not passing the initial value 0.

Use useState(0) to create a state variable count starting at 0.

3fill in blank

hard

Fix the error in the button's onClick handler to update the count state.

React

<button onClick={() => setCount([1])}>Increase</button>

Drag options to blanks, or click blank then click option'

AsetCount + 1

Bcount++

Ccount = count + 1

Dcount + 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using post-increment operator like count++ which doesn't return the new value.

Trying to assign value directly instead of passing to setCount.

To update state, pass the new value count + 1 to setCount. Using count++ or assignments won't work correctly.

4fill in blank

hard

Fill both blanks to create a state variable named name with initial value 'Alice'.

React

const [[1], [2]] = useState('Alice');

Drag options to blanks, or click blank then click option'

Aname

BsetName

Cuser

DsetUser

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing variable and setter names.

Using unrelated names like 'user' or 'setUser'.

The first element is the state variable name, and the second is the setter function setName.

5fill in blank

hard

Fill all three blanks to create a counter component with state and a button to increment.

React

import React, { [1] } from 'react';

export default function Counter() {
  const [[2], [3]] = useState(0);
  return (
    <button onClick={() => [3]([2] + 1)}>
      Count: [2]
    </button>
  );
}

Drag options to blanks, or click blank then click option'

AuseState

Bcount

CsetCount

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to import useState.

Mixing up variable and setter names.

Not using the setter function to update state.

Import useState, declare state variable count and setter setCount, then update count on button click.

Practice

1. What does the useState hook do in a React component?

easy

A. It fetches data from an external API automatically.

B. It allows the component to remember and update data over time.

C. It styles the component with CSS.

D. It handles routing between pages.

Solution

1. Step 1: Understand the purpose of useState

   The useState hook is designed to let a React component keep track of data that can change.

2. Step 2: Identify what useState does

   It returns the current value and a function to update that value, enabling the component to remember and update data.

3. Final Answer:

   It allows the component to remember and update data over time. -> Option B

4. Quick Check:

   useState manages component data = A [OK]

Hint: useState is for storing and changing data inside components [OK]

Common Mistakes:

• Thinking useState fetches data from APIs
• Confusing useState with styling or routing
• Believing useState automatically updates the UI without calling the setter

2. Which of the following is the correct syntax to declare a state variable count with initial value 0 using useState?

easy

A. const [count, setCount] = useState(0);

B. const count = useState(0);

C. const count, setCount = useState(0);

D. const [count, setCount] = useState;

Solution

1. Step 1: Recall useState syntax

   The useState hook returns an array with two elements: the current state and a function to update it, so destructuring with square brackets is needed.

2. Step 2: Check each option

   const [count, setCount] = useState(0); correctly uses array destructuring and calls useState with initial value 0. Others either miss destructuring or call useState incorrectly.

3. Final Answer:

   const [count, setCount] = useState(0); -> Option A

4. Quick Check:

   useState returns [value, setter] = C [OK]

Hint: useState returns [value, setter] array, use destructuring [OK]

Common Mistakes:

• Not using array destructuring
• Forgetting to call useState as a function
• Assigning useState to multiple variables without brackets

3. What will be displayed on the screen after clicking the button twice in this component?

import React, { useState } from 'react';

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

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
}

medium

A. Count: 0

B. Count: 1

C. Count: undefined

D. Count: 2

Solution

1. Step 1: Understand initial state and button action

   The initial count is 0. Each button click calls setCount(count + 1), increasing count by 1.

2. Step 2: Calculate count after two clicks

   After first click, count becomes 1. After second click, count becomes 2.

3. Final Answer:

   Count: 2 -> Option D

4. Quick Check:

   Two increments from 0 = 2 [OK]

Hint: Each click adds 1 to count starting from 0 [OK]

Common Mistakes:

• Thinking count resets on each click
• Confusing initial value with updated value
• Ignoring that setCount updates state asynchronously

4. Identify the error in this React component using useState:

import React, { useState } from 'react';

function Example() {
  const [value, setValue] = useState;
  return (
    

      
{value}
       setValue('Hello')}>Set
    
  );
}

medium

A. State variable value is not declared.

B. The setter function setValue is missing.

C. useState is not called as a function.

D. The button's onClick handler is invalid.

Solution

1. Step 1: Check useState usage

   The code assigns useState without parentheses, so it is not called as a function, which is required.

2. Step 2: Understand consequences

   Without calling useState(), value and setValue are undefined, causing errors.

3. Final Answer:

   useState is not called as a function. -> Option C

4. Quick Check:

   useState must be called with () = B [OK]

Hint: Always call useState with parentheses: useState() [OK]

Common Mistakes:

• Forgetting parentheses after useState
• Assuming useState is a variable, not a function
• Misreading error as button or variable issue

5. You want to create a toggle button that switches text between "ON" and "OFF" using useState. Which code correctly implements this behavior?

hard

A. const [isOn, setIsOn] = useState(false);
setIsOn(!isOn)}>{isOn ? 'ON' : 'OFF'}

B. const [isOn, setIsOn] = useState('OFF');
setIsOn('ON')}>{isOn}

C. const [isOn, setIsOn] = useState(true);
setIsOn(true)}>{isOn ? 'ON' : 'OFF'}

D. const isOn = false;
isOn = !isOn}>{isOn ? 'ON' : 'OFF'}

Solution

1. Step 1: Understand toggle logic with useState

   To toggle, state must be boolean and updated to its opposite on click.

2. Step 2: Evaluate each option

   const [isOn, setIsOn] = useState(false); setIsOn(!isOn)}>{isOn ? 'ON' : 'OFF'} initializes state as false and toggles it with !isOn, displaying 'ON' or 'OFF' accordingly. Others either don't toggle or misuse state.

3. Final Answer:

   const [isOn, setIsOn] = useState(false); setIsOn(!isOn)}>{isOn ? 'ON' : 'OFF'} -> Option A

4. Quick Check:

   Toggle state by flipping boolean = A [OK]

Hint: Toggle boolean state by setting it to !currentValue [OK]

Common Mistakes:

• Using string state without toggling
• Setting state to same value repeatedly
• Trying to mutate state variable directly