javascript - Getting React.createElement: type is invalid when using setState

itemprop="text">

href="https://i.stack.imgur.com/YHssU.png" rel="nofollow noreferrer"> src="https://i.stack.imgur.com/YHssU.png" alt="enter image description
here">

Expected

After
clicking the login button without entering in email or password, user should see the
Notification
component

Results

After
clicking login, setState is called setting this.state.errors to true, and the above
error message is
displayed.

handleSubmit
function

Below if I remove the
this.setState lines, nothing will happen, but I won't get any
Chrome errors. However I need that setState so I can then use
it to display the Notification (see code below this
block)

handleLoginSubmit =
            this.handleLoginSubmit.bind(this);
handleLoginSubmit(e, user) {

            e.preventDefault();
 if (R.isNil(user.email)) return;

 //
            Log user in via Firebase


            firebase.auth().signInWithEmailAndPassword(user.email, user.password)

            .catch((err) => {
 if (err.code === 'auth/user-not-found') {

            console.log('need to create user')
 return this.createUser(user.email,
            user.password);
 } else {
 console.log('Incorrect email or password,
            please try again')

 this.setState({
 errors:
            true,

 errorMsg: 'Incorrect email or password, please try
            again'
 }, function () {
 console.log('>>> this.state',
            this.state);
 });
 }


            console.log('Completed')

            })
}

I
also don't see the console.log after setting the
state:

href="https://i.stack.imgur.com/cxUra.png" rel="nofollow noreferrer"> src="https://i.stack.imgur.com/cxUra.png" alt="enter image description
here">

/>

render() {
 return
            (
 


 { this.state.errors ?
             : null }
             this.handleLoginSubmit }
 email={ this.state.email }
 password={
            this.state.password } />
 

            )
}

Full
Code

import React, {
            Component } from 'react'
import { connect } from
            'react-redux'
import { withRouter } from 'react-router-dom'
import *
            as R from 'ramda'
import * as firebase from
            'firebase'

import { Login } from
            '../../components'
import { Notification } from
            '../../components'


export class LoginX extends Component
            {
 constructor(props) {
 super(props);
 this.state =
            {
 email: '',
 password: '',
 errors: false,

            errorMsg: ''
 }
 this.handleLoginSubmit =
            this.handleLoginSubmit.bind(this);

 }


            componentDidMount() {
 firebase.auth().onAuthStateChanged((user) =>
            {
 this.checkAuth();
 })
 }


            componentDidUpdate(prevProps, prevState) {
 console.log('componentDidUpdate
            this.state', this.state)

 }

 checkAuth()
            {
 const user = firebase.auth().currentUser;

 if (!user)
            {
 return
 }
 else {
 if (!user.emailVerified)
            {

 // User has signed up, redirect them to verification

            this.props.history.push('/verification');
 return
 }

            }

 // User does not need to be authenticated.

            this.props.history.push('/dashboard');
 }



            handleLoginSubmit(e, user) {
 e.preventDefault();
 if
            (R.isNil(user.email)) return;

 // Log user in via
            Firebase
 firebase.auth().signInWithEmailAndPassword(user.email,
            user.password)
 .catch((err) => {
 if (err.code ===
            'auth/user-not-found') {
 console.log('need to create user')
 return
            this.createUser(user.email, user.password);

 }
 else
            {
 console.log('Incorrect email or password, please try
            again')

 this.setState({
 errors: true,

            errorMsg: 'Incorrect email or password, please try again'
 }, function()
            {
 console.log('>>> this.state', this.state);

            });

 }

 console.log('Completed')

            })
 }

 createUser(user, pass) {

            firebase.auth().createUserWithEmailAndPassword(user, pass)
 .then((user) =>
            {
 console.log('verification email sent')

 //
            user.sendEmailVerification()
 })
 .catch((err) => {

            console.log(err)
 // this.setState({inProgress: false})
 switch
            (err.code) {
 case "auth/email-already-in-use": {

            console.log('Account already exists, please log in')
 //
            this.setState({errorMsg: "Account already exists, please log in"});

            break;

 }
 case "auth/invalid-email": {

            console.log('Invalid email address format (domain is automatically
            included)')
 // this.setState({errorMsg: "Invalid email address format (domain
            is automatically included)"});
 break;
 }
 case
            "auth/operation-not-allowed": {
 console.log('Login system in unavailable,
            please contact the system administrator')
 // this.setState({errorMsg: "Login
            system in unavailable, please contact the system administrator"});

            break;

 }
 }
 })

            }

 render() {
 return (

            

 { this.state.errors ?  : null }

            
 email={
            this.state.email }
 password={ this.state.password } />

            
 )
 }
}

const
            mapStateToProps = (state) => {
 return {

            state

 }
}


const
            LoginContainer = LoginX;
export default
            connect(mapStateToProps)(withRouter(LoginContainer))

It's
something wrong with
Notifications

import
            React from 'react'
import PropTypes from
            'prop-types'

const Notifications = (props) =>
            {

 return (
             className="notification">
 Notifications
 



);

}

export default
Notifications

Notifications.propTypes =
{

};


href="https://i.stack.imgur.com/luGFQ.png" rel="nofollow noreferrer"> src="https://i.stack.imgur.com/luGFQ.png" alt="enter image description
here">