title: Element type is invalid: expected a string or a class/function (for composite components) but got: object
body: <p>I am doing some tutorials in React.js and I am fairly new to this.  I have this code in the dashboard.js</p>
  
  <pre><code>import React from 'react';
  import NewChatComponent from '../newChat/newChat';
  import ChatListComponent from '../chatList/chatList';
  import ChatViewComponent from '../chatView/chatView';
  import ChatTextBoxComponent from '../chatTextBox/chatTextBox';
  import styles from './styles';
  import { Button, withStyles } from '@material-ui/core';
  const firebase = require("firebase");
  
  class DashboardComponent extends React.Component {
  
    constructor() {
      super();
      this.state = {
        selectedChat: null,
        newChatFormVisible: false,
        email: null,
        friends: [],
        chats: []
      };
    }
  
    render() {
  
      const { classes } = this.props;
  
      if(this.state.email) {
        return(
          &lt;div className='dashboard-container' id='dashboard-container'&gt;
            &lt;ChatListComponent history={this.props.history} 
              userEmail={this.state.email} 
              selectChatFn={this.selectChat} 
              chats={this.state.chats} 
              selectedChatIndex={this.state.selectedChat}
              newChatBtnFn={this.newChatBtnClicked}&gt;
            &lt;/ChatListComponent&gt;
            {
              this.state.newChatFormVisible ? null : &lt;ChatViewComponent 
                user={this.state.email} 
                chat={this.state.chats[this.state.selectedChat]}&gt;
              &lt;/ChatViewComponent&gt;
            }
            { 
              this.state.selectedChat !== null &amp;&amp; !this.state.newChatFormVisible ? &lt;ChatTextBoxComponent userClickedInputFn={this.messageRead} submitMessageFn={this.submitMessage}&gt;&lt;/ChatTextBoxComponent&gt; : null 
            }
            {
              this.state.newChatFormVisible ? &lt;NewChatComponent goToChatFn={this.goToChat} newChatSubmitFn={this.newChatSubmit}&gt;&lt;/NewChatComponent&gt; : null
            }
            &lt;Button onClick={this.signOut} className={classes.signOutBtn}&gt;Sign Out&lt;/Button&gt;
          &lt;/div&gt;
        );
      } else {
        return(&lt;div&gt;LOADING....&lt;/div&gt;);
      }
    }
  
    signOut = () =&gt; firebase.auth().signOut();
  
    submitMessage = (msg) =&gt; {
      const docKey = this.buildDocKey(this.state.chats[this.state.selectedChat]
        .users
        .filter(_usr =&gt; _usr !== this.state.email)[0])
      firebase
        .firestore()
        .collection('chats')
        .doc(docKey)
        .update({
          messages: firebase.firestore.FieldValue.arrayUnion({
            sender: this.state.email,
            message: msg,
            timestamp: Date.now()
          }),
          receiverHasRead: false
        });
    }
  
    // Always in alphabetical order:
    // 'user1:user2'
    buildDocKey = (friend) =&gt; [this.state.email, friend].sort().join(':');
  
    newChatBtnClicked = () =&gt; this.setState({ newChatFormVisible: true, selectedChat: null });
  
    newChatSubmit = async (chatObj) =&gt; {
      const docKey = this.buildDocKey(chatObj.sendTo);
      await 
        firebase
          .firestore()
          .collection('chats')
          .doc(docKey)
          .set({
            messages: [{
              message: chatObj.message,
              sender: this.state.email
            }],
            users: [this.state.email, chatObj.sendTo],
            receiverHasRead: false
          })
      this.setState({ newChatFormVisible: false });
      this.selectChat(this.state.chats.length - 1);
    }
  
    selectChat = async (chatIndex) =&gt; {
      await this.setState({ selectedChat: chatIndex, newChatFormVisible: false });
      this.messageRead();
    }
  
    goToChat = async (docKey, msg) =&gt; {
      const usersInChat = docKey.split(':');
      const chat = this.state.chats.find(_chat =&gt; usersInChat.every(_user =&gt; _chat.users.includes(_user)));
      this.setState({ newChatFormVisible: false });
      await this.selectChat(this.state.chats.indexOf(chat));
      this.submitMessage(msg);
    }
  
    // Chat index could be different than the one we are currently on in the case
    // that we are calling this function from within a loop such as the chatList.
    // So we will set a default value and can overwrite it when necessary.
    messageRead = () =&gt; {
      const chatIndex = this.state.selectedChat;
      const docKey = this.buildDocKey(this.state.chats[chatIndex].users.filter(_usr =&gt; _usr !== this.state.email)[0]);
      if(this.clickedMessageWhereNotSender(chatIndex)) {
        firebase
          .firestore()
          .collection('chats')
          .doc(docKey)
          .update({ receiverHasRead: true });
      } else {
        console.log('Clicked message where the user was the sender');
      }
    }
  
    clickedMessageWhereNotSender = (chatIndex) =&gt; this.state.chats[chatIndex].messages[this.state.chats[chatIndex].messages.length - 1].sender !== this.state.email;
  
    componentWillMount = () =&gt; {
        firebase.auth().onAuthStateChanged(async _usr =&gt; {
          if(!_usr)
            this.props.history.push('/login');
          else {
            await firebase
              .firestore()
              .collection('chats')
              .where('users', 'array-contains', _usr.email)
              .onSnapshot(async res =&gt; {
                const chats = res.docs.map(_doc =&gt; _doc.data());
                await this.setState({
                  email: _usr.email,
                  chats: chats,
                  friends: []
                });
              })
          }
      });
    }
  }
  
  export default withStyles(styles)(DashboardComponent);
  </code></pre>
  
  <p>The problematic line of code is this one:-</p>
  
  <pre><code>newChatBtnClicked = () =&gt; this.setState({ newChatFormVisible: true, selectedChat: null });
  </code></pre>
  
  <p>If I set newChatFormbVisible: false, I do not get the error, however setting it to true, fails with this error:-</p>
  
  <blockquote>
    <p>index.js:1375 Warning: React.createElement: 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 your code at dashboard.js:47.
        in DashboardComponent (created by WithStyles(DashboardComponent))
        in WithStyles(DashboardComponent) (created by Context.Consumer)
        in Route (at src/index.js:28)
        in div (at src/index.js:25)
        in Router (created by BrowserRouter)
        in BrowserRouter (at src/index.js:24) console. @ index.js:1375 warningWithoutStack @ react.development.js:188 warning @
    react.development.js:623 createElementWithValidation @
    react.development.js:1785 render @ dashboard.js:44
    finishClassComponent @ react-dom.development.js:15319
    updateClassComponent @ react-dom.development.js:15274 beginWork @
    react-dom.development.js:16262 performUnitOfWork @
    react-dom.development.js:20279 workLoop @
    react-dom.development.js:20320 renderRoot @
    react-dom.development.js:20400 performWorkOnRoot @
    react-dom.development.js:21357 performWork @
    react-dom.development.js:21267 performSyncWork @
    react-dom.development.js:21241 interactiveUpdates$1 @
    react-dom.development.js:21526 interactiveUpdates @
    react-dom.development.js:2268 dispatchInteractiveEvent @
    react-dom.development.js:5085 react-dom.development.js:57 Uncaught
    Invariant Violation: 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>
  </blockquote>