Multiple state variables in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

React

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

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

AuseState

BuseEffect

CuseRef

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect instead of useState

Trying to declare state without a hook

Confusing useRef with useState

The useState hook is used to declare state variables in React functional components.

2fill in blank

medium

Complete the code to declare a second state variable named name with initial value an empty string.

React

const [name, setName] = [1]('');

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

AuseEffect

BuseMemo

CuseCallback

DuseState

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect or useMemo instead of useState

Not providing an initial value

To create a state variable for the name, useState is used with an empty string as the initial value.

3fill in blank

hard

Fix the error in the code to update the count state variable by adding 1.

React

setCount([1] + 1);

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

AsetCount

Bcount

Ccount()

DCount

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to call count as a function

Using setCount inside itself incorrectly

Using wrong capitalization

To update the count, you use the current value count plus 1. Calling count() is incorrect because count is a variable, not a function.

4fill in blank

hard

Fill both blanks to declare two state variables: age starting at 25 and city starting as 'NYC'.

React

const [age, setAge] = [1](25);
const [city, setCity] = [2]('NYC');

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

AuseState

BuseEffect

CuseRef

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using different hooks for each variable

Confusing useEffect with useState

Both age and city are state variables, so useState is used for both.

5fill in blank

hard

Fill all three blanks to create a component with two state variables and a button that updates count by 1 when clicked.

React

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

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

  return (
    <button onClick={() => setCount(count + 1)} aria-label="Increment count">
      Count: {count}
    </button>
  );
}

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

AuseState

BuseEffect

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Not importing useState

Using useRef instead of useState for count

Forgetting to update count on button click

The component imports useState and useEffect hooks. The count state is created with useState. The button updates count by 1 on click.