What is state in React - Interactive Quiz & Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create 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'

AuseContext

BuseRef

CuseEffect

DuseState

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect instead of useState

Trying to update state directly without a setter function

The useState hook creates a state variable and a function to update it.

2fill in blank

medium

Complete the code to update the count state by adding 1 when the button is clicked.

React

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

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

Acount - 1

B0

Ccount + 1

Dcount * 2

Attempts:

3 left

💡 Hint

Common Mistakes

Using subtraction instead of addition

Setting count to zero instead of increasing

To increase the count by 1, use count + 1 inside the setter function.

3fill in blank

hard

Fix the error in the code to correctly initialize state with an object having a name property.

React

const [user, setUser] = useState([1]);

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

A{name: 'Alice'}

B"name: 'Alice'"

C[name: 'Alice']

D'name: "Alice"'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of an object

Using square brackets instead of curly braces

State should be initialized with an object literal: {name: 'Alice'}.

4fill in blank

hard

Fill both blanks to create a state variable called message with initial value 'Hello' and update it to 'Hi'.

React

const [message, [1]] = useState([2]);
setMessage('Hi');

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

AsetMessage

Bmessage

C'Hello'

D'Hi'

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the setter function and state variable

Using the wrong initial value

The setter function is usually named starting with 'set'. Initial state is the first value.

5fill in blank

hard

Fill all three blanks to create a counter component with state count starting at 0, a button to increment, and display the count.

React

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

function Counter() {
  const [count, [2]] = [3](0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

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

AuseState

BsetCount

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to import useState

Using wrong setter function name

Calling wrong hook to initialize state

Import useState, use setCount as setter, and call useState(0) to initialize.