Updating state in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to update the state using the setter function.

React

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

function increment() {
  setCount([1]);
}

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

Acount * 2

Bcount - 1

C0

Dcount + 1

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the old count without change.

Using subtraction instead of addition.

To increase the count by one, you add 1 to the current count and pass it to setCount.

2fill in blank

medium

Complete the code to update state based on the previous state value.

React

const [likes, setLikes] = useState(0);

function addLike() {
  setLikes([1] => [1] + 1);
}

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

Aprev

Bcount

Clikes

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Using the state variable directly inside the setter function.

Forgetting to return the new state value.

When updating state based on previous state, use a function with a parameter representing the previous value, commonly named prev.

3fill in blank

hard

Fix the error in the state update to correctly toggle a boolean value.

React

const [isOn, setIsOn] = useState(false);

function toggle() {
  setIsOn([1] => ![1]);
}

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

Aprev

Bstate

CisOn

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using the state variable directly inside the setter function.

Not negating the previous state value.

To toggle a boolean state, use the previous state parameter (commonly prev) and return its negation.

4fill in blank

hard

Fill both blanks to update an object state property correctly.

React

const [user, setUser] = useState({ name: 'Alice', age: 25 });

function updateName(newName) {
  setUser({ ...user, [1]: [2] });
}

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

Aname

BnewName

Cage

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Overwriting the entire user object without spreading.

Using the wrong property name.

To update the name property in the user object, spread the existing user and set name to newName.

5fill in blank

hard

Fill both blanks to update a nested state object immutably.

React

const [profile, setProfile] = useState({
  user: { name: 'Bob', details: { age: 30, city: 'NY' } }
});

function updateCity(newCity) {
  setProfile({
    ...profile,
    user: {
      ...profile.user,
      details: { ...profile.user.details, [1]: [2] }
    }
  });
}

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

Acity

BnewCity

Cage

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Not spreading nested objects causing loss of data.

Updating the wrong property.

To update the nested city property, spread the outer objects and set city to newCity. The age option is a distractor here and not used in the code.