Avoiding prop drilling in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a React context.

React

const ThemeContext = React.[1]();

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

AuseEffect

BcreateContext

CuseState

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState instead of createContext

Using useContext to create context (it's for consuming context)

React.createContext() creates a new context object to share data without prop drilling.

2fill in blank

medium

Complete the code to provide context value to child components.

React

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

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

Atheme

Bcontext

Cstate

Dprops

Attempts:

3 left

💡 Hint

Common Mistakes

Passing props object instead of the specific value

Passing undefined or wrong variable

The value prop of the Provider passes the data (like theme) to children.

3fill in blank

hard

Fix the error in consuming context inside a functional component.

React

const theme = React.[1](ThemeContext);

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

AcreateContext

BuseState

CuseContext

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Using createContext to consume context

Using useState or useEffect instead of useContext

useContext is the React hook to consume context values inside components.

4fill in blank

hard

Fill both blanks to create a context and provide a default value.

React

const UserContext = React.[1]([2]);

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

AcreateContext

BuseContext

C{}

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using useContext instead of createContext

Passing null when an object is expected

createContext accepts a default value, often an empty object for user data.

5fill in blank

hard

Fill all three blanks to consume context and display a user name.

React

const user = React.[1](UserContext);

// Assume user object has a 'name' property
// Use optional chaining to avoid errors
const displayName = user?.[3] || 'Guest';
return <p>Hello, [2]. Welcome back!</p>;

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

AuseContext

Buser.name

Cname

DcreateContext

EdisplayName

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access user.name directly without optional chaining

Using createContext instead of useContext to consume

useContext reads the context, displayName holds the safe user name, and name accesses the property.