Creating context in React - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new React context.

React

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

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

AuseContext

BuseState

CcreateContext

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Using useContext instead of createContext

Trying to use useState or useEffect here

The createContext function is used to create a new React context object.

2fill in blank

medium

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

React

function MyProvider({ children }) {
  return (
    <MyContext.Provider value={{ name: 'Alice' }}>
      [1]
    </MyContext.Provider>
  );
}

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

AMyContext.Consumer

B<MyContext.Consumer />

C<div>children</div>

Dchildren

Attempts:

3 left

💡 Hint

Common Mistakes

Wrapping children inside a div unnecessarily

Using MyContext.Consumer here instead of children

The children prop represents the nested components that will receive the context.

3fill in blank

hard

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

React

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

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

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

AuseContext

BcreateContext

CuseState

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Importing createContext instead of useContext

Trying to use useState or useEffect here

The useContext hook is used to read the current context value inside a component.

4fill in blank

hard

Fill both blanks to create and export a context with a default value.

React

import React from 'react';

const [1] = React.[2]({ name: 'Guest' });

export default [1];

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

AUserContext

BcreateContext

CuseContext

DMyContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useContext instead of createContext

Exporting the wrong variable name

You create a context named UserContext using createContext with a default value.

5fill in blank

hard

Fill all three blanks to consume context and display a greeting.

React

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

function Greeting() {
  const user = [2](UserContext);
  return <h1>Hello, [3]!</h1>;
}

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

AuseContext

BuseState

Cuser.name

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState instead of useContext

Displaying the whole user object instead of user.name

Use useContext to get the user object, then display user.name in the greeting.