Summary - Context

Set up a theme (dark/light) context and connect two buttons.

Summary - Context

In this group you learned what context is, why it's an alternative to prop drilling, how to create a context object with createContext, provide a value with Provider, and read it with useContext.

The recipe: put global data in context, wrap with a Provider at the top, read with useContext at the bottom. This eliminates prop drilling and keeps code clean.

In the next step you'll combine the provider and the consumer in one file.

Exercise Create and read ThemeBadge

Complete the skeleton. Create ThemeContext with default "light". Then write a ThemeBadge component that reads the theme with useContext(ThemeContext) and returns <p>{ '{ theme }' }</p>. Export it.

Show example solution

import { createContext, useContext } from "react";

const ThemeContext = createContext("light");

function ThemeBadge() {
  const theme = useContext(ThemeContext);
  return <p>{theme}</p>;
}

export default ThemeBadge;

Test yourself

Where does useContext read from?
- From state
- The nearest Provider
- From props
- The farthest Provider
Show answer

The nearest Provider — useContext reads from the nearest Provider.
Match the context steps

createContext

Make object
Provider

Give value
useContext

Read
value

Carry data

Next lesson: What is useRef?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies