title: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function but got: undefined
body: <p>I have a parent Component as <strong>app.js</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  import { Route, Link, BrowserRouter, HashRouter} from 'react-router-dom'
  //import BrowserHistory from 'react-router/lib/BrowserHistory'
  import {Scholarships} from './scholarships'
  
  class App extends Component {
          render() {
                  return (
                          &lt;div&gt;
                          &lt;HashRouter&gt;
                              &lt;div&gt;
                                  &lt;Route exact path='/' component={Home} /&gt;
                                  &lt;Route path='/hello' component={Hello} /&gt;
                                  &lt;Route path='/scholarship' component={Scholarships} /&gt;
  
                              &lt;/div&gt;
                          &lt;Scholarships /&gt; 
                          &lt;/HashRouter&gt;
                          &lt;/div&gt;
  
                  )
  
          }
  }
  
  const Home = () =&gt; &lt;h1&gt; Hello from home! &lt;/h1&gt;
  const Hello = () =&gt; &lt;h2&gt; Hello React &lt;/h2&gt;
  
  export default App
  </code></pre>
  
  <p>and there is a child component as <strong>scholarships.js</strong></p>
  
  <pre><code>import React, {Component} from 'react'
  import Request from 'react-http-request' //`https://www.npmjs.com/package/react-http-request`
  
  class Scholarships extends Component {
          constructor(props) {
                  super(props);
          }
          render() {
                  return (
                          &lt;Request
                                  url = 'https://api.github.com/users/mbasso'
                                  method = 'get'
                                  accept = 'application/json'
                                  verbose = {true}
                          &gt;
                                  {
                                          ({error, result, loading}) =&gt; {
                                                          if(loading) {
                                                                  return &lt;div id="scholarships"&gt; loading... &lt;/div&gt;;
                                                          }
                                                          else {
                                                                  return &lt;div id="scholarships"&gt; { JSON.stringify(result) }&lt;/div&gt; ;
                                                          }
  
                                                  }
                                  }
                          &lt;/Request&gt;
                  )
          }
  }
  
  export default Scholarships
  </code></pre>
  
  <p>It is throwing an error <strong>Warning: React.createElement: 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. Check the render method of <code>App</code>.  bundle.js:357:9</strong> and
  <strong>Error: A  may have only one child element</strong> 
  I'm just starting with react so it might be a noob question but I am struck up here, If I pass <code>&lt;Scholarships /&gt;</code> directly into <strong>main.js</strong> it is working as expected why I am not able to nest it here  </p>
  
  <p>Additionally I've also tried </p>
  
  <ul>
  <li><code>const scholarship = () =&gt; &lt;Scholarships /&gt;</code></li>
  <li><code>const scholarship = &lt;Scholarships /&gt;</code></li>
  <li><code>const scholarship = () =&gt; (&lt;Scholarships /&gt;)</code></li>
  <li><code>const scholarship = () =&gt; {Scholarships}</code></li>
  </ul>
  
  <p>I would also like to know that my <strong>Scholarship</strong> component is return plain JSON.Stringify text so why is it still a Object in reference of the error given by <code>const scholarship = () =&gt; &lt;Scholarship /&gt;</code></p>
  
  <p>My <strong>main.js</strong> file </p>
  
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom'
  import App from './app'
  import Scholarships from './scholarships'
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'))
  </code></pre>