Context API in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new context using React Native's Context API.

React Native

import React from 'react';
const MyContext = React.[1]();

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

AProvider

BuseContext

CConsumer

DcreateContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useContext instead of createContext

Trying to use Provider or Consumer directly without creating context

We use createContext() to create a new context object.

2fill in blank

medium

Complete the code to provide a context value to child components.

React Native

import React from 'react';
const MyContext = React.createContext();

export default function App() {
  return (
    <MyContext.[1] value={{ name: 'Alice' }}>
      <ChildComponent />
    </MyContext.[1]>
  );
}

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

AProvider

BConsumer

CcreateContext

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using Consumer instead of Provider to supply value

Trying to use useContext here instead of Provider

The Provider component supplies the context value to its children.

3fill in blank

hard

Fix the error in the code to consume context inside a functional component.

React Native

import React, { [1] } from 'react';
const MyContext = React.createContext();

function ChildComponent() {
  const context = [1](MyContext);
  return <Text>{context.name}</Text>;
}

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

AuseContext

BcreateContext

CProvider

DConsumer

Attempts:

3 left

💡 Hint

Common Mistakes

Using createContext instead of useContext to consume

Trying to use Provider or Consumer directly inside functional component

We use the useContext hook to access context values inside functional components.

4fill in blank

hard

Fill both blanks to create a context and provide a default value.

React Native

const MyContext = React.[1]([2]);

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

AcreateContext

BuseContext

C{ name: 'Guest' }

DProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Using useContext instead of createContext

Passing Provider instead of default value

createContext can take a default value used when no Provider is present.

5fill in blank

hard

Fill all three blanks to consume context and display a property safely.

React Native

import React, { [1] } from 'react';
const MyContext = React.createContext();

function Display() {
  const context = [2](MyContext);
  return <Text>{context?.[3] ?? 'No name'}</Text>;
}

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

AuseContext

Cname

DProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Using Provider instead of useContext

Accessing context property without optional chaining

Import and use useContext to get context, then access the name property safely with optional chaining.