Why lifting state is needed in React - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a state variable in a React functional component.

React

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

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

AupdateCount

BsetCount

CcountSet

DchangeCount

Attempts:

3 left

💡 Hint

Common Mistakes

Using a setter name that doesn't start with 'set'.

Mixing up the order of the array destructuring.

In React, the convention is to name the setter function as set plus the state variable name. Here, setCount is the correct setter for count.

2fill in blank

medium

Complete the code to lift the state up by passing the state setter as a prop.

React

<ChildComponent onChange=[1] />

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

AsetCount

BuseState

Ccount

DhandleChange

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the state variable instead of the setter function.

Passing a function name that is not defined.

To lift state up, you pass the setter function setCount to the child component so it can update the parent's state.

3fill in blank

hard

Fix the error in the code by choosing the correct way to update the lifted state in the child component.

React

function Child({ onChange }) {
  return <button onClick={() => [1](prev => prev + 1)}>Increment</button>;
}

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

AsetCount

Bcount

ConChange

DhandleChange

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'setCount' directly in the child when it's not in scope.

Trying to update the state variable instead of calling the setter.

The child component receives the setter function as onChange. To update the state, call onChange with the new value or updater function.

4fill in blank

hard

Fill both blanks to correctly lift state up and pass the current state as a prop.

React

function Parent() {
  const [value, [1]] = useState('');
  return <Child value=[2] onChange={setValue} />;
}

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

AsetValue

Bvalue

CsetVal

Dval

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent names for state and setter.

Passing the setter as the current value or vice versa.

The setter function is named 'setValue' and the current state is 'value'. Both must be used correctly to lift state and pass it down.

5fill in blank

hard

Fill all three blanks to complete a lifted state example with a controlled input.

React

function Parent() {
  const [text, [1]] = useState('');
  return <Child inputValue=[2] onInputChange=[3] />;
}

function Child({ inputValue, onInputChange }) {
  return <input value={inputValue} onChange={e => onInputChange(e.target.value)} />;
}

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

AsetText

Btext

DhandleChange

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the setter in parent and child.

Not passing the setter function to the child.

The state setter is 'setText', the current state is 'text', and the setter is passed as 'onInputChange' to update the state from the child.