Avoiding prop drilling in React - Mini Project: Build & Apply

Avoiding Prop Drilling in React with Context

📖 Scenario: You are building a simple React app that shows a user's favorite color in a deeply nested component. Instead of passing the color through many layers of components (which is called prop drilling), you will use React Context to share the color easily.

🎯 Goal: Build a React app that uses Context to provide a favorite color value to a nested component without passing it through intermediate components as props.

📋 What You'll Learn

Create a React Context to hold the favorite color

Provide the favorite color value at the top level using Context.Provider

Consume the favorite color value in a deeply nested component using useContext hook

Avoid passing the favorite color as props through intermediate components

💡 Why This Matters

🌍 Real World

In real apps, data like user info, theme, or language often needs to be accessed by many components. Using React Context helps avoid passing props through many layers, making code cleaner and easier to maintain.

💼 Career

Understanding how to avoid prop drilling with React Context is a key skill for frontend developers building scalable React applications.

1

Create the favorite color data and Context

Create a constant called favoriteColor and set it to the string 'blue'. Then create a React Context called ColorContext using React.createContext().

React

import React from 'react';

// Create favoriteColor and ColorContext here
# Your code here

Need a hint?

Use const favoriteColor = 'blue' and const ColorContext = React.createContext().

2

Provide the favorite color using Context.Provider

Create a functional component called App. Inside it, return ColorContext.Provider with the value prop set to favoriteColor. Inside the provider, render a component called Parent.

React

import React from 'react';

const favoriteColor = 'blue';
const ColorContext = React.createContext();

// Create App component with ColorContext.Provider and render Parent inside
# Your code here

Need a hint?

Wrap Parent with ColorContext.Provider and set value={favoriteColor}.

3

Create nested components without passing props

Create two functional components: Parent and Child. Parent should return <Child />. Child will later consume the context. Do not pass any props between them.

React

import React from 'react';

const favoriteColor = 'blue';
const ColorContext = React.createContext();

function App() {
  return (
    
      
    
  );
}

// Create Parent and Child components here
# Your code here

Need a hint?

Create Parent returning <Child /> and an empty Child component.

4

Consume the favorite color in Child using useContext

In the Child component, use the useContext hook with ColorContext to get the favorite color. Return a <div> that says Your favorite color is {color}, where color is the value from context.

React

import React from 'react';

const favoriteColor = 'blue';
const ColorContext = React.createContext();

function App() {
  return (
    
      
    
  );
}

function Parent() {
  return ;
}

function Child() {
  // Use useContext to get color and return div
  # Your code here
}

Need a hint?

Import useContext and use it inside Child to get the color from ColorContext.