Why state and props drive component behavior in React Native - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

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

BcountSetter

CupdateCount

DchangeCount

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong updater function name causes errors.

Forgetting to use useState hook.

The useState hook returns a pair: the current state and a function to update it. The convention is to name the updater as set + state variable name.

2fill in blank

medium

Complete the code to pass a prop named title with value 'Hello' to the Greeting component.

React Native

<Greeting [1]="Hello" />

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

Atext

Bname

Ctitle

Dlabel

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong prop name causes the component to not receive the data.

Forgetting to pass the prop.

Props are passed as attributes to components. Here, the prop name is title.

3fill in blank

hard

Fix the error in the code to correctly update the state count by 1 when the button is pressed.

React Native

onPress={() => [1](count + 1)}

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

AsetCount

Bcount

CupdateCount

DchangeCount

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign directly to the state variable.

Calling a non-existent function.

To update state, you must call the updater function returned by useState, here setCount.

4fill in blank

hard

Fill both blanks to correctly display a prop called message inside a Text component.

React Native

<Text>[1].[2]</Text>

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

Aprops

Bstate

Cmessage

DsetMessage

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access props without the props object.

Confusing state and props.

Props are accessed via the props object, so props.message shows the message prop.

5fill in blank

hard

Fill all three blanks to create a state variable called text, update it on change, and display it inside a TextInput.

React Native

const [[1], [2]] = useState('');

<TextInput value=[1] onChangeText=[2] />

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

Atext

BsetText

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up state variable and updater names.

Not passing the updater function correctly.

We declare state variable text and updater setText. The TextInput's value is text, and onChangeText calls setText to update it.