useContext() react hook doesn't return the correct value

Question

I wrap my Home component in the following layout:

export const DataContext = React.createContext({});

const Layout: React.FunctionComponent = (props) => {
  const data = {title: "abc", description: "def"};
  
  return (
    <DataContext.Provider value={data}>
        {props.children}
    </DataContext.Provider>
  );
};

I would like to use useContext hook in my Home component, but it returns an empty object:

const Home: React.FunctionComponent = () => {
  const content = React.useContext(DataContext);

  return (
    <Layout>
       // content data goes here
    </Layout>
  );
};

I suspected that this is because I define context variable outside of Layout wrapper, which contains context provider, so it falls back to the default value of the context that I defined (an empty object). However, even if I console log the useContext hook inside the layout provider, it also returns an empty object:

const Home: React.FunctionComponent = () => {
  const content = React.useContext(DataContext);

  return (
    <Layout>
      {console.log(React.useContext(DataContext))}
    </Layout>
  );
};

Any idea why?

Answer 1

useContext will get the value from the Provider closest to it up the tree. Your Layout is inside Home, which will make the Provider below it in the tree.

You could make Home a child to Layout instead to see it working.

Example

const DataContext = React.createContext({});

const Layout = props => {
  const data = { title: "abc", description: "def" };

  return (
    <DataContext.Provider value={data}>{props.children}</DataContext.Provider>
  );
};

const Home = () => {
  const content = React.useContext(DataContext);

  return <div>{JSON.stringify(content)}</div>;
};

function App() {
  return (
    <Layout>
      <Home />
    </Layout>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>