title: Error: Element type is invalid: expected a string or a class/function but got: object
body: <p>I'm getting this error:</p>
  
  <blockquote>
    <p>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>
  
  <p>Check the render method of <code>Register</code>.</p>
  
  <p>this is my register codes :</p>
  
  <pre><code>import React from 'react';
  import Button from '../../../components/atoms/Button'; 
  import { connect } from 'react-redux';
  import { registerUserAPI } from '../../../config/redux/action';
  
  class Register extends React.Component {
    state = {
      email: '',
      password: '',  
    }
  
    handleChangeText = (e) =&gt; {
      this.setState({
        [e.target.id]: e.target.value
      })
    }
  
    handleRegisterSubmit = async () =&gt; {
      const {email, password} = this.state;
      const res = await this.props.registerAPI({email, password}).catch(err =&gt; err);
      if (res) {
        this.setState({
          email: '',
          password: ''
        }) 
      }  
    }
    render() {
      return (
        &lt;div className="auth-container"&gt; 
        &lt;div className="auth-card"&gt;
          &lt;p className="auth-title"&gt;Register Page&lt;/p&gt;
          &lt;input className="input" id="email" placeholder="Email" type="text" onChange={this.handleChangeText} value={this.state.email} /&gt;
          &lt;input className="input" id="password" placeholder="Password" type="password" onChange={this.handleChangeText} value={this.state.password} /&gt;
          &lt;Button onClick={this.handleRegisterSubmit} title="Register" loading={this.props.isLoading} /&gt;
        &lt;/div&gt; 
        &lt;/div&gt;
      );
    }
  }
  
  const reduxState = (state) =&gt; ({
    isLoading: state.isLoading
  })
  
  const reduxDispatch = (dispatch) =&gt; ({
    registerAPI: (data) =&gt; dispatch(registerUserAPI(data));
  })
  
  export default connect(reduxState, reduxDispatch)(Register);
  </code></pre>
  
  <p>App </p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import TopupPage from '../TopupPage';
  import Register from '../Register';
  import Dashboard from '../Dashboard/Layout';
  import Login from '../Login';
  import Homepage from '../Homepage';
  import {
    BrowserRouter as Router,
    Route,
    Link
  } from 'react-router-dom';
  import { Provider } from 'react-redux';
  import { store } from '../../../config/redux';
  import thunk from 'redux-thunk';
  import { createStore, applyMiddleware } from 'redux';
  
  function App(){
    return (
      &lt;Provider store={store}&gt;
        &lt;Router&gt;
          &lt;div&gt;
            &lt;Route path="/" exact component={Homepage} /&gt;
            &lt;Route path="/register" component={Register} /&gt;
            &lt;Route path="/TopupPage" component={TopupPage} /&gt;
            &lt;Route path="/login" component={Login} /&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
     &lt;/Provider&gt;
   );
  }
  
  export default App;
  </code></pre>