Context provider in React - Mini Project: Build & Apply

Using a Context Provider in React

📖 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 provider to share a theme color string with child components.

📋 What You'll Learn

Create a React context with a default value

Create a provider component that uses the context

Use the provider to wrap child components

Consume the context value inside a child component

💡 Why This Matters

🌍 Real World

Context providers help share data like themes, user info, or language 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 a React context with default value

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

React

import React from 'react';

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

Need a hint?

Use React.createContext and pass the string 'light' as the default value.

2

Create a ThemeProvider component

Create a functional component called ThemeProvider that returns ThemeContext.Provider wrapping children and passes the value 'dark' to the provider.

React

import React from 'react';

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

// Create ThemeProvider component that uses ThemeContext.Provider
// Your code here

Need a hint?

Use a function component with { children } props and return ThemeContext.Provider with value="dark".

3

Use ThemeProvider to wrap App component

Create a functional component called App that returns ThemeProvider wrapping a Content component.

React

import React from 'react';

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

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

// Create App component that uses ThemeProvider to wrap Content
// Your code here

Need a hint?

Wrap the Content component inside ThemeProvider in the App component.

4

Consume context value inside Content component

Inside the Content component, use React.useContext with ThemeContext to get the theme value, then return a div that displays the text Current theme: followed by the theme value.

React

import React from 'react';

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

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

function Content() {
    // Use React.useContext to get theme
    // Your code here
}

function App() {
    return ;
}

Need a hint?

Call React.useContext(ThemeContext) to get the theme value and display it inside a div.