title: React.js Context API: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)
body: <p>Consider the following scenario:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import LocaleService from '../Services/LocaleService.js';
  
  const defaultStore = {
      loaded: false,
      locales: []
  };
  
  const LocalesContext = React.createContext(defaultStore);
  class LocalesProvider extends Component
  {
      state = defaultStore;
  
      load() {
          const service = new LocaleService(), that = this;
          service.fetch().then(function (locales) {
              that.setState({ locales: locales, loaded: true });
          });
      }
  
      data() {
          return this.state;
      }
  
      componentDidMount() {
          this.load();
      }
  
      render() {
          return (
              &lt;LocalesContext.Provider value={this.data()}&gt;
                  {this.props.children}
              &lt;/LocalesContext.Provider&gt;
          );
      }
  }
  
  export default LocalesProvider;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import Sidebar from './Sidebar.js';
  import Topbar from './Topbar.js';
  import Content from './Content.js';
  import LocalesProvider from './Providers/LocalesProvider.js';
  
  class App extends Component
  {
      state = {
          ready: true
      }
  
      render() {
          if (this.state.ready) {
              return (
                  &lt;div&gt;
                      &lt;Topbar/&gt;
                      &lt;section className="section"&gt;
                          &lt;section className="columns" style={{height: '100vh'}}&gt;
                              &lt;div&gt;
                                  &lt;LocalesProvider.Consumer&gt;
                                      { data =&gt; 
                                          (
                                              &lt;Sidebar isReady={data.loaded} locales={data.locales}/&gt;
                                          )
                                      }
                                  &lt;/LocalesProvider.Consumer&gt;
                              &lt;/div&gt;
                              &lt;main className="column" style={{overflow: 'auto', position: 'relative'}}&gt;
                                  &lt;Content/&gt;
                              &lt;/main&gt;
                          &lt;/section&gt;
                      &lt;/section&gt;
                  &lt;/div&gt;
              );
          } else {
              return ('Loading...');
          }
      }
  }
  
  export default App;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import LocalesProvider from './Providers/LocalesProvider.js';
  import { NavLink, HashRouter } from "react-router-dom";
  
  class Sidebar extends Component
  {
    constructor(props) {
      super(props);
    }
  
    buildLocaleLinks (locales, uri) {
      if (!this.props.isReady) {
        return 'Loading...';
      } 
  
      if (!locales.length) {
        return null;
      }
  
      return locales.map(function (locale) {
        return (
          &lt;li key={'navigation.translate.' + locale.props.key}&gt;
            &lt;NavLink replace to={'/' + uri + '/' + locale.props.key}&gt;
              {locale.props.key}
            &lt;/NavLink&gt;
          &lt;/li&gt;
        );
      })
    }
  
      render () {
          return (
      &lt;HashRouter&gt;
          &lt;aside className="menu"&gt;
            &lt;p className="menu-label"&gt;
              Menu
            &lt;/p&gt;
              &lt;ul className="menu-list"&gt;
              &lt;li&gt;Translate&lt;/li&gt;
              &lt;li&gt;
                &lt;ul&gt;
                  &lt;LocalesProvider.Consumer&gt;
                    {locales =&gt; (
                      this.buildLocaleLinks(locales, 'translate')
                    )}
                  &lt;/LocalesProvider.Consumer&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;Validate&lt;/li&gt;
              &lt;li&gt;
                &lt;ul&gt;
                  &lt;LocalesProvider.Consumer&gt;
                    {locales =&gt; (
                      this.buildLocaleLinks(locales, 'validate')
                    )}
                  &lt;/LocalesProvider.Consumer&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/aside&gt;
        &lt;/HashRouter&gt;
          );
      }
  }
  
  export default Sidebar;
  </code></pre>
  
  <blockquote>
    <p>Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.</p>
  </blockquote>