Why global state avoids prop drilling in React Native - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to access the global state using React Context.

React Native

const value = useContext([1]);

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

AMyContext

BuseState

Cprops

DsetState

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState instead of the context object.

Trying to access props directly for global state.

We use useContext with the context object (e.g., MyContext) to access global state.

2fill in blank

medium

Complete the code to provide global state to child components.

React Native

<MyContext.Provider value=[1]>
  {children}
</MyContext.Provider>

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

AuseEffect

Bprops

CsetState

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Passing props instead of state.

Passing setState function instead of state.

The value prop of the provider should be the global state to share it with children.

3fill in blank

hard

Fix the error in the component to avoid prop drilling by using global state.

React Native

function ChildComponent({ data }) {
  const globalData = useContext([1]);
  return <Text>{globalData}</Text>;
}

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

ADataContext

Bprops

CuseState

DsetData

Attempts:

3 left

💡 Hint

Common Mistakes

Using props instead of context.

Trying to use useState inside the child without context.

Using useContext(DataContext) accesses global state directly, avoiding passing data through props.

4fill in blank

hard

Fill both blanks to create a global state and provide it to the app.

React Native

const [[1], setData] = useState('Hello');

<MyContext.Provider value=[2]>
  <App />
</MyContext.Provider>

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

Adata

Bstate

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for state and provider value.

Passing setData instead of data to provider.

The state variable is named data and the provider value should be data to share it globally.

5fill in blank

hard

Fill all three blanks to consume and update global state in a component.

React Native

const { [1], [2] } = useContext(MyContext);

function update() {
  [2]('New Value');
}

return <Button onPress={update} title=[1] />;

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

Adata

BsetData

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up data and setData names.

Using props instead of context.

We destructure data and setData from context. The button title shows data.