Lifting state up in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

React Native

function Parent() {
  const [count, setCount] = React.useState(0);
  return <Child count=[1] />;
}

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

A0

BsetCount

Ccount

Dprops.count

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the setter function instead of the state value.

Passing a constant instead of the state variable.

The parent component passes the current state value count as a prop to the child.

2fill in blank

medium

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

React Native

function Parent() {
  const [count, setCount] = React.useState(0);
  return <Child onIncrement=[1] />;
}

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

AsetCount

Bcount

C() => setCount(count + 1)

Dincrement

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the state value instead of the setter function.

Passing a function call instead of the function itself.

The parent passes the setter function setCount so the child can update the state.

3fill in blank

hard

Fix the error in the child component to call the passed setter function correctly.

React Native

function Child({ onIncrement }) {
  return <Button title="Add" onPress=[1] />;
}

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

AonIncrement()

B() => onIncrement()

ConIncrement

D() => onIncrement

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the function immediately instead of passing a function.

Passing the function reference without wrapping when parameters are needed.

The onPress expects a function. Wrapping onIncrement() in an arrow function ensures it is called only when pressed.

4fill in blank

hard

Fill both blanks to lift state up and handle input change in the parent.

React Native

function Parent() {
  const [text, setText] = React.useState('');
  return <Child value=[1] onChangeText=[2] />;
}

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

Atext

BsetText

C() => setText

Dtext => setText(text)

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the setter function directly without wrapping.

Passing a function that does not accept the new text parameter.

The parent passes the current text state and a function to update it when the child input changes.

5fill in blank

hard

Fill all three blanks to lift state up and display the updated count in the parent.

React Native

function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <Child count=[1] onIncrement=[2] />
      <Text>Count: [3]</Text>
    </>
  );
}

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

Acount

BsetCount

Ccount + 1

Dcount.toString()

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the wrong value to the Text component.

Passing a calculation instead of the state variable.

The parent passes the current count, the setter function, and displays the count as text.