title: React: useContext, how to retrieve it from an external component?
body: <p>If I have in <code>Comp1.js</code></p>
  
  <pre><code>const Comp1 = () =&gt; {
    const globalTheme = new createContext()
    return (
      &lt;globalTheme.Provider globalStyle={anyVar}&gt;
       &lt;Layout&gt;
        &lt;AnotherComponent /&gt;
       &lt;/Layout&gt;
      &lt;/globalTheme.Provider&gt;
    )
  }
  </code></pre>
  
  <p>And then in <code>layout.js</code></p>
  
  <pre><code>  const globalStyle = useContext(globalTheme)
    console.log(globalStyle)
  </code></pre>
  
  <p>I get <code>globalTheme is not defined</code>, should I create the context again?</p>
  
  <pre><code>  const globalTheme = new createContext()
    const globalStyle = useContext(globalTheme)
    console.log(globalStyle)
  </code></pre>
  
  <p>Then I get <code>undefined</code> for <code>globalStyle</code></p>
  
  <p>what am I missing?</p>
  
  <hr>
  
  <p>EDIT: Based on the comments, I use a third file and import the context to get access to it -> <code>theme-context.js</code></p>
  
  <pre><code>import { createContext } from 'react'
  
  export const themes = {
    light: {
      foreground: '#000000',
      background: '#eeeeee',
    },
    dark: {
      foreground: '#ffffff',
      background: '#222222',
    },
  }
  
  export const ThemeContext = createContext(
    themes.dark // default value
  )
  </code></pre>
  
  <p>Then I provide this context in another file <code>blog-template.js</code></p>
  
  <pre><code>import { ThemeContext } from '../context/theme-context'
  import Layout from '../components/layout'
  
  const Blog = () =&gt; {
  let globalStyle = 'just any value'
  return (
      &lt;ThemeContext.Provider globalStyle={globalStyle}&gt;
        &lt;Layout /&gt;
      &lt;/ThemeContext.Provider&gt;
  )}
  </code></pre>
  
  <p>And then in <code>layout.js</code></p>
  
  <pre><code>import React, { useContext} from 'react'
  import { ThemeContext } from '../context/theme-context'
  
  const Layout = () =&gt; {
    const globalStyle = useContext(ThemeContext)
    console.log(globalStyle)
  }
  </code></pre>
  
  <p>But <code>globalStyle</code> is undefined, why is that?</p>
  
  <hr>
  
  <p>EDIT: The mistake was not to provide value as prop</p>
  
  <pre><code>-&lt;ThemeContext.Provider globalStyle={globalStyle}&gt;
  +-&lt;ThemeContext.Provider value={globalStyle}&gt;
  </code></pre>