Context provider in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a context using React.

React

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

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

AuseEffect

BuseState

CuseContext

DcreateContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState instead of createContext

Using useContext to create context

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

2fill in blank

medium

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

React

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

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

AWrapper

BConsumer

CProvider

DContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using Consumer instead of Provider to pass values

Using Context or Wrapper which are not valid components

The Provider component of the context is used to pass the value down to children.

3fill in blank

hard

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

React

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

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

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

AuseState

BuseContext

CuseEffect

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState or useEffect to read context

Not importing useContext from React

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

4fill in blank

hard

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

React

const ThemeContext = React.[1]('light');

function App() {
  return <ThemeContext.[2] value="dark">Content</ThemeContext.[2]>;
}

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

AcreateContext

BuseContext

CProvider

DConsumer

Attempts:

3 left

💡 Hint

Common Mistakes

Using Consumer instead of Provider to pass value

Using useContext to create context

Use createContext to create the context with a default value, and Provider to pass a new value.

5fill in blank

hard

Fill all three blanks to consume context and display its value inside a component.

React

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

const LanguageContext = React.createContext('English');

function DisplayLanguage() {
  const language = [2](LanguageContext);
  return <p>Current language: [3]</p>;
}

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

AuseContext

BuseState

Clanguage

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState or useEffect instead of useContext

Trying to display the hook call instead of the variable

Import and use useContext to get the context value, then display the variable language.