Updating phase in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to update state correctly in a React functional component.

React

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

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

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

Acount + 1

Bcount - 1

Ccount * 2

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using a fixed number like 0 resets the count.

Subtracting 1 decreases the count instead of increasing.

To update state by increasing the count, use count + 1 inside setCount.

2fill in blank

medium

Complete the code to run a side effect after the component updates.

React

useEffect(() => {
  console.log('Count updated:', count);
}, [[1]]);

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

AsetCount

BuseState

Ccount

Dincrement

Attempts:

3 left

💡 Hint

Common Mistakes

Putting the setter function instead of the state variable.

Leaving the dependency array empty, so effect runs only once.

The effect runs when count changes, so it must be in the dependency array.

3fill in blank

hard

Fix the error in the state update function to avoid stale state.

React

setCount([1] => [1] + 1);

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

AprevCount

Bcount

Cstate

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using the state variable directly can cause stale updates.

Not using a function causes race conditions in updates.

Using a function with a parameter like prevCount ensures you get the latest state value.

4fill in blank

hard

Fill both blanks to create a controlled input that updates state on change.

React

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

<input value=[1] onChange={e => setName([2])} />

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

Aname

Be.target.value

CsetName

De.value

Attempts:

3 left

💡 Hint

Common Mistakes

Using e.value instead of e.target.value.

Not setting the input's value to the state variable.

The input's value is controlled by name. On change, update state with e.target.value.

5fill in blank

hard

Fill all three blanks to update multiple state values in an object using the spread operator.

React

const [form, setForm] = useState({ email: '', password: '' });

setForm({ ...[1], [2]: [3] });

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

Aform

Bemail

Ce.target.value

Dpassword

Attempts:

3 left

💡 Hint

Common Mistakes

Not spreading the old state causes loss of other fields.

Mixing up field names or using wrong event properties.

Use the spread operator on form to keep existing values, then update the password field with the new value from e.target.value.