Consuming context in React - Mini Project: Build & Apply

Consuming context

📖 Scenario: You are building a simple React app that shares a theme color across components using React Context.

🎯 Goal: Create a React component that consumes a ThemeContext to display text in the theme color.

📋 What You'll Learn

Create a React context called ThemeContext with the value { color: 'blue' }

Create a component called ThemedText that uses useContext to get the theme color

Render a <p> element inside ThemedText with the text 'This text is themed!'

Apply the theme color as the text color style on the <p> element

💡 Why This Matters

🌍 Real World

Sharing theme or user settings across many components without passing props manually.

💼 Career

Understanding React Context is essential for managing global state and theming in modern React apps.

1

Create the ThemeContext

Create a React context called ThemeContext using createContext with the value { color: 'blue' }.

React

import React from 'react';
// Create ThemeContext with default value { color: 'blue' }
// Your code here

Need a hint?

Use React.createContext and pass { color: 'blue' } as the default value.

2

Create ThemedText component

Create a functional component called ThemedText that returns a <p> element with the text 'This text is themed!'.

React

import React from 'react';

const ThemeContext = React.createContext({ color: 'blue' });

// Create ThemedText component that returns a  with text
// Your code here

Need a hint?

Define a function named ThemedText that returns a paragraph with the exact text.

3

Consume ThemeContext in ThemedText

Inside the ThemedText component, use useContext with ThemeContext to get the theme object. Store it in a variable called theme.

React

import React from 'react';

const ThemeContext = React.createContext({ color: 'blue' });

function ThemedText() {
  // Use useContext to get theme
  // Your code here
  return This text is themed!;
}

Need a hint?

Import useContext from React and call it with ThemeContext.

4

Apply theme color style

In the ThemedText component, add a style attribute to the <p> element that sets color to theme.color.

React

import React, { useContext } from 'react';

const ThemeContext = React.createContext({ color: 'blue' });

function ThemedText() {
  const theme = useContext(ThemeContext);
  // Add style attribute to  with color from theme.color
  // Your code here
  return This text is themed!;
}

Need a hint?

Use the style prop with an object setting color to theme.color.