React context in client components in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

NextJS

import React from 'react';

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

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

AcreateContext

BuseContext

CuseState

DcreateRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using useContext instead of createContext

Trying to use useState to create context

The createContext function creates a new context object with a default value.

2fill in blank

medium

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

NextJS

import React from 'react';

const MyContext = React.createContext('default');

export default function MyProvider({ children }) {
  return (
    <MyContext.[1] value="provided">
      {children}
    </MyContext.[1]>
  );
}

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

AuseContext

BProvider

CConsumer

DcreateContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using Consumer instead of Provider to pass value

Trying to use useContext here

The Provider component supplies the context value to its children.

3fill in blank

hard

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

NextJS

"use client";

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

export default function MyComponent() {
  const value = [1](MyContext);
  return <div>{value}</div>;
}

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

AuseEffect

BcreateContext

CuseState

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using createContext instead of useContext

Trying to use useState to get context

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

4fill in blank

hard

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

NextJS

import React from 'react';

const NumberContext = React.[1](0);

export function NumberProvider({ children }) {
  return <NumberContext.[2] value={42}>{children}</NumberContext.[2]>;
}

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

AcreateContext

BuseContext

CProvider

DConsumer

Attempts:

3 left

💡 Hint

Common Mistakes

Using useContext to create context

Using Consumer instead of Provider to pass value

Use createContext to create the context and Provider to supply the value.

5fill in blank

hard

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

NextJS

"use client";

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

export default function ShowNumber() {
  const number = [2](NumberContext);
  return <p>The number is: [3]</p>;
}

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

AuseContext

BuseState

Cnumber

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState instead of useContext

Trying to display 'value' instead of the variable

Use useContext to get the context value, then display the variable holding it.