Why context is needed in React - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a React context using the correct function.

React

const MyContext = [1]();

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

AuseState

BcreateContext

CuseEffect

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState instead of createContext

Using useEffect or useContext to create context

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

2fill in blank

medium

Complete the code to provide a value to the context provider.

React

<MyContext.Provider value=[1]>{children}</MyContext.Provider>

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

Anull

Bfalse

Cundefined

DsharedValue

Attempts:

3 left

💡 Hint

Common Mistakes

Passing null or undefined as value

Forgetting to pass a value prop

The value prop of the provider passes the shared data to consuming components.

3fill in blank

hard

Fix the error in consuming context by completing the hook call.

React

const value = [1](MyContext);

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

AuseState

BcreateContext

CuseContext

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Using createContext instead of useContext

Using useState or useEffect to consume context

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

4fill in blank

hard

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

React

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

return <ThemeContext.Provider value=[2]>{children}</ThemeContext.Provider>;

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

AcreateContext

BuseState

C'dark'

D'light'

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState instead of createContext

Passing the default value as the provider value

We create a context with default 'light' and provide 'dark' as the current value.

5fill in blank

hard

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

React

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

return <div>The theme is [2].[3].</div>;

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

AuseContext

Bvalue

Ctheme

DcreateContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using createContext to consume context

Trying to display the hook call directly without accessing properties

We use useContext to get the context value, then access its theme property to display.