useState hook in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the useState hook from React.

React Native

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

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

AuseEffect

BuseState

CuseContext

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useEffect instead of useState

Forgetting to import useState

Using useContext or useRef by mistake

The useState hook is imported from React to manage state in functional components.

2fill in blank

medium

Complete the code to declare a state variable called count with initial value 0.

React Native

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

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

AsetCount

BgetCount

CcountSetter

DupdateCount

Attempts:

3 left

💡 Hint

Common Mistakes

Using getCount instead of setCount

Naming the setter function incorrectly

Confusing the order of the array destructuring

The second element returned by useState is the setter function to update the state variable.

3fill in blank

hard

Fix the error in the code to update the count state by adding 1.

React Native

setCount([1] + 1);

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

Acount()

BCount

CsetCount

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Calling count as a function like count()

Using setCount inside itself incorrectly

Using wrong capitalization like Count

To update the state, use the current state variable count plus 1 inside the setter function.

4fill in blank

hard

Fill both blanks to create a button that increases count when pressed.

React Native

<Button title="Increase" onPress={() => [1]([2] + 1)} />

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

AsetCount

Bcount

Cincrement

DupdateCount

Attempts:

3 left

💡 Hint

Common Mistakes

Using increment or updateCount which are not defined

Swapping the setter and state variable

Forgetting to add 1 to count

The onPress handler calls setCount with the current count plus 1 to increase the count.

5fill in blank

hard

Fill all three blanks to create a functional component that shows count and a button to increase it.

React Native

function Counter() {
  const [[1], [2]] = useState(0);
  return (
    <View>
      <Text>{ [1] }</Text>
      <Button title="Add" onPress={() => [2]([1] + 1)} />
    </View>
  );
}

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

Acount

BsetCount

CupdateCount

Dcounter

Attempts:

3 left

💡 Hint

Common Mistakes

Using undefined names like updateCount or counter

Mixing up the order of state and setter

Not using the state variable inside the Text component

The state variable is count, the setter is setCount, and the displayed value is count.