title: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object in ReactJS
body: <p>I'm relatively new to ReactJS and just started to make a portfolio project.<br/>
  When I run the program, it doesn't show any error in the editor but shows the following error in the browser.</p>
  
  <blockquote>
    <p>Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 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>
    
    <p>Check the render method of <code>HomePage</code>.</p>
  </blockquote>
  
  <p>Here is my <strong>HomePage.js</strong></p>
  
  <pre><code>import React from 'react';
  
  import Hero from '../components/Hero';
  import Carousel from '../components/Carousel';
  
  function HomePage(props) {
  
      return(
          &lt;div&gt;
              &lt;Hero title={props.title} subTitle={props.subTitle} text={props.text} /&gt;
              &lt;Carousel /&gt;
          &lt;/div&gt;
      );
  
  }
  
  export default HomePage;
  </code></pre>
  
  <p><strong>Hero.js</strong></p>
  
  <pre><code>import React from 'react';
  import Jumbotron from 'react-bootstrap/Jumbotron';
  import Container from 'react-bootstrap/Container';
  import Row from 'react-bootstrap/Row';
  import Col from 'react-bootstrap/Col';
  
  function Hero(props) {
  
      return(
          &lt;Jumbotron className="bg-transparent jumbotron-fluid p-0"&gt;
              &lt;Container fluid={true}&gt;
                  &lt;Row className="justify-content-center py-5"&gt;
                      &lt;Col md={8} sm={12}&gt;
                          { props.title &amp;&amp; &lt;h1 className="display-1 font-weight-bolder"&gt;{props.title}&lt;/h1&gt; }
                          { props.subTitle &amp;&amp; &lt;h3 className="display-4 font-weight-light"&gt;{props.subTitle}&lt;/h3&gt; }
                          { props.text &amp;&amp; &lt;h3 className="lead font-weight-light"&gt;{props.text}&lt;/h3&gt; }
                      &lt;/Col&gt;
                  &lt;/Row&gt;
              &lt;/Container&gt;
          &lt;/Jumbotron&gt;
      );
  
  }
  export default Hero;
  </code></pre>
  
  <p><strong>Carousel.js</strong></p>
  
  <pre><code>import React from 'react';
  
  import Card from '../components/Card';
  
  import pose1 from '../assets/images/pose1.jpg';
  import pose2 from '../assets/images/pose2.jpg';
  import pose3 from '../assets/images/evverest.jpg';
  import Container from 'react-bootstrap/Container';
  import Row from 'react-bootstrap/Row';
  
  class Carousel extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {
              items: [
                  {
                      id: 0,
                      title: 'Dev Grub',
                      subTitle: 'The cookbook for developers',
                      imgSrc: pose1,
                      link: 'https://devgrub.com',
                      selected: false
                  },
                  {
                      id: 1,
                      title: 'Garrett Love',
                      subTitle: 'YouTube channel',
                      imgSrc: pose2,
                      link: 'https://www.youtube.com/channel/UCxSITxL2JbF229OGCqieVZw',
                      selected: false
                  },
                  {
                      id: 2,
                      title: 'Evverest',
                      subTitle: 'A social network for developers',
                      imgSrc: pose3,
                      link: 'https://github.com/garrettlove8/evverest',
                      selected: false
                  },
              ]
          }
      }
  
  
      handleCardClick = (id, card) =&gt; {
  
          let items = [...this.state.items];
  
          items[id].selected = items[id].selected ? false : true;
  
          items.forEach(item =&gt; {
              if(item.id !== id) {
                  item.selected = false;
              }
          });
  
          this.setState({
              items
          });
      }
  
  
      makeItems = (items) =&gt; {
          return items.map(item =&gt; {
              return &lt;Card item={item} click={(e =&gt; this.handleCardClick(item.id, e))} key={item.id} /&gt;
          })
      }
  
  
      render() {
          return(
              &lt;Container fluid={true}&gt;
                  &lt;Row className="justify-content-around"&gt;
                      {this.makeItems(this.state.items)}
                  &lt;/Row&gt;
              &lt;/Container&gt;
          );
      }
  
  }
  
  export default Carousel;
  </code></pre>
  
  <p>The imports are absolutely correct. How do I resolve this error?</p>
  
  <p><strong>OUTPUT/CONSOLE:</strong></p>