cf.completefrontend

Predict the outputEasy

What does this page show when some readers have no provider above them?

Three Greetings read the same context. One has no provider above it, one has a provider with value="Hindi", and the last one's provider was written in a hurry.

What does it log, and what does the page show?
import { createContext, useContext } from "react";
 
const LanguageContext = createContext("English");
 
function Greeting({ place }) {
  const language = useContext(LanguageContext);
  return <p>{place}: {language}</p>;
}
 
export default function App() {
  return (
    <main>
      <Greeting place="Header" />
      <LanguageContext value="Hindi">
        <Greeting place="Page" />
      </LanguageContext>
      <LanguageContext lang="Tamil">
        <Greeting place="Footer" />
      </LanguageContext>
    </main>
  );
}

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…