Context best practices in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a React context with a default value.

React

const MyContext = React.[1]('default');

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

AcreateContext

BuseContext

CuseState

DcreateState

Attempts:

3 left

💡 Hint

Common Mistakes

Using useContext instead of createContext

Trying to use useState to create context

Use React.createContext to create a new context with a default value.

2fill in blank

medium

Complete the code to consume a context value inside a functional component.

React

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

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

AuseContext

BuseState

CuseEffect

DcreateContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using createContext instead of useContext

Trying to use useState to get context

Use useContext hook to read the current context value inside a component.

3fill in blank

hard

Fix the error in the code to properly provide a context value.

React

<MyContext.Provider value=[1]>
  <ChildComponent />
</MyContext.Provider>

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

A{{value}}

B{value}

Cvalue

D[value]

Attempts:

3 left

💡 Hint

Common Mistakes

Passing value without curly braces

Using double curly braces which is incorrect syntax

The value prop must be passed as a JavaScript expression inside curly braces.

4fill in blank

hard

Fill both blanks to create a context and export its provider component.

React

const [1] = React.createContext();

export const [2] = [1].Provider;

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

AThemeContext

BUserContext

CThemeProvider

DUserProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing context and provider names

Not exporting the provider correctly

Create a context named ThemeContext and export its Provider as ThemeProvider.

5fill in blank

hard

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

React

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

function Display() {
  const value = [2](MyContext);
  return <p>The value is: [3]</p>;
}

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

AuseContext

BuseState

Cvalue

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Importing wrong hooks

Using wrong variable names in JSX

Import and use useContext to get the context value, then display it inside the paragraph.