cf.completefrontend

Predict the outputMedium

With nested providers, which theme does each component read?

Section reads the theme and also provides a new one to whatever it's given as children. Card is written inside <Section> in App.

What does it log, and what does the page show?
import { createContext, useContext } from "react";
 
const ThemeContext = createContext("light");
 
function Label({ name }) {
  const theme = useContext(ThemeContext);
  return <li>{name}: {theme}</li>;
}
 
function Section({ theme, children }) {
  const outer = useContext(ThemeContext);
  return (
    <ThemeContext value={theme}>
      <li>Section reads: {outer}</li>
      {children}
    </ThemeContext>
  );
}
 
export default function App() {
  return (
    <ul>
      <Label name="Header" />
      <ThemeContext value="dark">
        <Label name="Page" />
        <Section theme="blue">
          <Label name="Card" />
        </Section>
        <Label name="Footer" />
      </ThemeContext>
    </ul>
  );
}

It runs in development, rendered as <App />.

The answer

Work out every line it logs, in order, and what the page shows at the end. Then check.

Checking your sign-in…