Context provider in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React component using Context?

Consider this React code using a context provider and consumer. What will be rendered inside the <div>?

React

import React, { createContext, useContext } from 'react';

const MyContext = createContext('default');

function Display() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

export default function App() {
  return (
    <MyContext.Provider value="Hello World">
      <Display />
    </MyContext.Provider>
  );
}

A <div>Hello World</div>

B <div></div>

C <div>undefined</div>

D <div>default</div>

💡 Hint

Remember that the value passed to the provider is what the consumer receives.

The Display component uses useContext(MyContext) to get the current context value. Since App wraps Display in MyContext.Provider with value "Hello World", that is what Display renders.

❓ state_output

intermediate

What is the value of count after clicking the button twice?

Given this React component using context and state, what will be the value of count after clicking the button two times?

React

import React, { createContext, useContext, useState } from 'react';

const CountContext = createContext();

function Counter() {
  const { count, setCount } = useContext(CountContext);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      <Counter />
    </CountContext.Provider>
  );
}

A 0

B 1

C 2

D undefined

💡 Hint

Each click increases count by 1 using the setter from context.

The initial count is 0. Each button click calls setCount(count + 1), increasing count by 1. After two clicks, count becomes 2.

📝 Syntax

advanced

Which option causes a syntax error in defining a context provider?

Which of these React context provider usages will cause a syntax error?

A <MyContext.Provider value={value} children={children} />

B <MyContext.Provider value={value} children>{children}</MyContext.Provider>

C <MyContext.Provider value={value}>{children}</MyContext.Provider>

D <MyContext.Provider value={value} children={children}></MyContext.Provider>

💡 Hint

Check the usage of the children prop in JSX.

Option B uses children as a boolean prop without a value but also includes children inside the tags, which is invalid JSX syntax. The other options are valid ways to pass children.

🔧 Debug

advanced

Why does the consumer not update when provider value changes?

In this React code, the consumer component does not update when the provider's value changes. What is the most likely cause?

React

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext('light');

function ThemeDisplay() {
  const theme = useContext(ThemeContext);
  return <div>Theme: {theme}</div>;
}

export default function App() {
  const [theme, setTheme] = useState('light');

  function toggleTheme() {
    setTheme(theme === 'light' ? 'dark' : 'light');
  }

  return (
    <ThemeContext.Provider value={theme}>
      <ThemeDisplay />
      <button onClick={toggleTheme}>Toggle Theme</button>
    </ThemeContext.Provider>
  );
}

A State setter function is not called properly in toggleTheme.

B ThemeContext is not created with a default value.

C useContext hook is used incorrectly inside ThemeDisplay.

D Provider value is hardcoded as "light" and does not use state variable.

💡 Hint

Check what value the provider actually passes to consumers.

The provider's value is always the string "light" because it is hardcoded. It does not use the theme state variable, so changes to state do not affect the context value, and consumers do not update.

🧠 Conceptual

expert

What happens if multiple nested providers supply different values?

Given nested React context providers with different values, what value does a consumer inside the inner provider receive?

React

import React, { createContext, useContext } from 'react';

const UserContext = createContext('Guest');

function ShowUser() {
  const user = useContext(UserContext);
  return <div>User: {user}</div>;
}

export default function App() {
  return (
    <UserContext.Provider value="Alice">
      <UserContext.Provider value="Bob">
        <ShowUser />
      </UserContext.Provider>
    </UserContext.Provider>
  );
}

A <div>User: Bob</div>

B <div>User: undefined</div>

C <div>User: Guest</div>

D <div>User: Alice</div>

💡 Hint

Think about how React context resolves values with nested providers.

The consumer uses the nearest provider's value. Since ShowUser is inside the inner provider with value "Bob", it receives "Bob".