Creating context in React - Try It Yourself

Creating context

📖 Scenario: You are building a simple React app that shares a theme color across multiple components without passing props manually.

🎯 Goal: Create a React context to hold a theme color and use it in a child component to display the current theme.

📋 What You'll Learn

Create a React context with a default value

Create a provider component that uses the context

Consume the context value in a child component using useContext hook

Render the child component inside the provider to show the theme color

💡 Why This Matters

🌍 Real World

React context is used to share data like themes, user info, or settings across many components without passing props manually.

💼 Career

Understanding React context is essential for building scalable React apps and working on modern frontend projects.

1

Create the ThemeContext

Create a React context called ThemeContext with the default value 'light' using createContext.

React

// Create ThemeContext with default value 'light'
// Your code here

Hint

Use createContext('light') to create the context with default value 'light'.

2

Create ThemeProvider component

Create a functional component called ThemeProvider that returns ThemeContext.Provider with the value 'dark' and renders its children inside.

React

const ThemeContext = createContext('light');

// Create ThemeProvider component that provides value 'dark'
// Your code here

Hint

Wrap {children} inside ThemeContext.Provider with value 'dark'.

3

Create ThemedText component consuming context

Create a functional component called ThemedText that uses useContext(ThemeContext) to get the theme and returns a <p> element displaying Current theme: followed by the theme value.

React

const ThemeContext = createContext('light');

function ThemeProvider({ children }) {
    return {children};
}

// Create ThemedText component that uses useContext to get theme
// Your code here

Hint

Use const theme = useContext(ThemeContext) inside the component and display it in a paragraph.

4

Render ThemedText inside ThemeProvider

Create a functional component called App that returns ThemeProvider wrapping the ThemedText component.

React

function ThemedText() {
    const theme = useContext(ThemeContext);
    return Current theme: {theme};
}

// Create App component that renders ThemeProvider with ThemedText inside
// Your code here

Hint

Return <ThemeProvider><ThemedText /></ThemeProvider> inside App.

Practice

1. What is the main purpose of React's createContext() function?

easy

A. To manage local component state

B. To create a new React component

C. To fetch data from an API

D. To create a context object that allows sharing data without passing props manually

Solution

1. Step 1: Understand what createContext() does

   This function creates a context object that can hold data to be shared across components without passing props manually.

2. Step 2: Compare with other options

   Creating components, fetching data, or managing local state are unrelated to createContext().

3. Final Answer:

   To create a context object that allows sharing data without passing props manually -> Option D

4. Quick Check:

   Purpose of createContext() = share data without props [OK]

Hint: Remember: createContext() sets up shared data space [OK]

Common Mistakes:

• Confusing context creation with component creation
• Thinking it fetches data from APIs
• Mixing it up with useState for local state

2. Which of the following is the correct way to create a context in React?

easy

A. const MyContext = useContext();

B. const MyContext = React.createContext();

C. const MyContext = createContext();

D. const MyContext = React.useContext();

Solution

1. Step 1: Identify correct syntax for creating context

   The correct way is to call createContext() from the React object: React.createContext().

2. Step 2: Check other options

   const MyContext = createContext(); misses the React prefix, which causes an error unless imported separately. Options A and D use useContext(), which is for consuming context, not creating it.

3. Final Answer:

   const MyContext = React.createContext(); -> Option B

4. Quick Check:

   Creating context = React.createContext() [OK]

Hint: Use React.createContext() to create context, not useContext() [OK]

Common Mistakes:

• Using useContext() instead of createContext()
• Omitting React prefix without import
• Confusing creation and consumption functions

3. Given the code below, what will be logged to the console?

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

function Display() {
  const value = React.useContext(MyContext);
  console.log(value);
  return null;
}

function App() {
  return (
    <MyContext.Provider value="hello">
      <Display />
    </MyContext.Provider>
  );
}

medium

A. "hello"

B. "default"

C. undefined

D. Error: useContext called outside provider

Solution

1. Step 1: Understand context default and provider value

   The context default is "default", but the Display component is inside a provider with value "hello".

2. Step 2: Determine value consumed by useContext

   Since Display is inside the provider, useContext(MyContext) returns "hello".

3. Final Answer:

   "hello" -> Option A

4. Quick Check:

   Provider value overrides default = "hello" [OK]

Hint: Provider value overrides default context value [OK]

Common Mistakes:

• Assuming default value is always used
• Thinking useContext errors without provider
• Confusing string quotes in output

4. Identify the error in the following React context usage:

const ThemeContext = React.createContext('light');

function Button() {
  const theme = React.useContext();
  return <button>Theme is {theme}</button>;
}

medium

A. Provider is missing around Button

B. Context should be created with useContext

C. Missing argument in useContext call

D. Button component must be class-based to use context

Solution

1. Step 1: Check useContext usage

   The useContext hook requires the context object as an argument. Here, it is called without any argument.

2. Step 2: Verify other options

   Context is correctly created with createContext. Provider is optional but not an error here. Functional components can use hooks, so no need for class-based.

3. Final Answer:

   Missing argument in useContext call -> Option C

4. Quick Check:

   useContext requires context argument [OK]

Hint: Always pass context object to useContext() [OK]

Common Mistakes:

• Calling useContext() without argument
• Confusing createContext and useContext
• Thinking Provider is mandatory to avoid errors

5. You want to create a theme context that provides either "light" or "dark" mode to your app. Which approach correctly creates and uses this context with a provider and consumer component?

hard

A. const ThemeContext = React.createContext('light');

function ThemeProvider({ children }) {
const theme = 'dark';
return (
<ThemeContext.Provider value={theme}>
{children}
</ThemeContext.Provider>
);
}

function DisplayTheme() {
const theme = React.useContext(ThemeContext);
return <div>Current theme: {theme}</div>;
}

B. const ThemeContext = React.useContext('light');

function ThemeProvider({ children }) {
const theme = 'dark';
return (
<ThemeContext.Provider value={theme}>
{children}
</ThemeContext.Provider>
);
}

function DisplayTheme() {
const theme = React.useContext(ThemeContext);
return <div>Current theme: {theme}</div>;
}

C. const ThemeContext = React.createContext();

function ThemeProvider({ children }) {
const theme = 'dark';
return (
<ThemeContext.Provider value={theme}>
{children}
</ThemeContext.Provider>
);
}

function DisplayTheme() {
const theme = React.useContext();
return <div>Current theme: {theme}</div>;
}

D. const ThemeContext = React.createContext('light');

function ThemeProvider({ children }) {
const [theme, setTheme] = React.useState('dark');
return (
<ThemeContext.Provider value={theme}>
{children}
</ThemeContext.Provider>
);
}

function DisplayTheme() {
const theme = React.useContext(ThemeContext);
return <div>Current theme: {theme}</div>;
}

Solution

1. Step 1: Check context creation and default value

   const ThemeContext = React.createContext('light'); function ThemeProvider({ children }) { const theme = 'dark'; return ( <ThemeContext.Provider value={theme}> {children} </ThemeContext.Provider> ); } function DisplayTheme() { const theme = React.useContext(ThemeContext); return <div>Current theme: {theme}</div>; } correctly creates context with default "light" using createContext('light').

2. Step 2: Verify provider and consumer usage

   The provider passes "dark" as value, and consumer uses useContext(ThemeContext) correctly. const ThemeContext = React.createContext('light'); function ThemeProvider({ children }) { const [theme, setTheme] = React.useState('dark'); return ( <ThemeContext.Provider value={theme}> {children} </ThemeContext.Provider> ); } function DisplayTheme() { const theme = React.useContext(ThemeContext); return <div>Current theme: {theme}</div>; } attempts to use state but misses the React. prefix on useState, causing ReferenceError. const ThemeContext = React.useContext('light'); function ThemeProvider({ children }) { const theme = 'dark'; return ( <ThemeContext.Provider value={theme}> {children} </ThemeContext.Provider> ); } function DisplayTheme() { const theme = React.useContext(ThemeContext); return <div>Current theme: {theme}</div>; } incorrectly calls React.useContext('light') instead of createContext(). const ThemeContext = React.createContext(); function ThemeProvider({ children }) { const theme = 'dark'; return ( <ThemeContext.Provider value={theme}> {children} </ThemeContext.Provider> ); } function DisplayTheme() { const theme = React.useContext(); return <div>Current theme: {theme}</div>; } calls useContext() without argument, causing error.

3. Final Answer:

   Correctly creates and uses context with provider and consumer -> Option A

4. Quick Check:

   Correct createContext and useContext with provider = const ThemeContext = React.createContext('light'); function ThemeProvider({ children }) { const theme = 'dark'; return ( <ThemeContext.Provider value={theme}> {children} </ThemeContext.Provider> ); } function DisplayTheme() { const theme = React.useContext(ThemeContext); return <div>Current theme: {theme}</div>; } [OK]

Hint: createContext with default, provider passes value, useContext consumes [OK]

Common Mistakes:

• Using useContext instead of createContext to create context
• Calling useContext without argument
• Not passing provider value or missing provider