CODEWITHSUNDEEP
javascriptreactjs
suryapanca
suryapanca

Reputation: 31

Error: Element type is invalid: expected a string or a class/function but got: object

I'm getting this 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.

Check the render method of Register.

this is my register codes :

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) => {
    this.setState({
      [e.target.id]: e.target.value
    })
  }

  handleRegisterSubmit = async () => {
    const {email, password} = this.state;
    const res = await this.props.registerAPI({email, password}).catch(err => err);
    if (res) {
      this.setState({
        email: '',
        password: ''
      }) 
    }  
  }
  render() {
    return (
      <div className="auth-container"> 
      <div className="auth-card">
        <p className="auth-title">Register Page</p>
        <input className="input" id="email" placeholder="Email" type="text" onChange={this.handleChangeText} value={this.state.email} />
        <input className="input" id="password" placeholder="Password" type="password" onChange={this.handleChangeText} value={this.state.password} />
        <Button onClick={this.handleRegisterSubmit} title="Register" loading={this.props.isLoading} />
      </div> 
      </div>
    );
  }
}

const reduxState = (state) => ({
  isLoading: state.isLoading
})

const reduxDispatch = (dispatch) => ({
  registerAPI: (data) => dispatch(registerUserAPI(data));
})

export default connect(reduxState, reduxDispatch)(Register);

App 

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 (
    <Provider store={store}>
      <Router>
        <div>
          <Route path="/" exact component={Homepage} />
          <Route path="/register" component={Register} />
          <Route path="/TopupPage" component={TopupPage} />
          <Route path="/login" component={Login} />
        </div>
      </Router>
   </Provider>
 );
}

export default App;

Upvotes: 3

Views: 1393

Answers (2)

MohammadAmin Mohammadi
MohammadAmin Mohammadi

Reputation: 1211

Change:

  <Route path="/login" component={<Login/>} />

to

  <Route path="/login" component={Login} />

Also here is a syntax error:

const reduxDispatch = (dispatch) => ({
  registerAPI: (data) => dispatch(registerUserAPI(data));
})

you should remove ';'.

Upvotes: 3

Danko
Danko

Reputation: 1864

As error says, you are passing some object in place where primitive value should be.

My best gess is that in reduxState you should have something like this: 

const reduxState = (state) => ({
        isLoading: state.someKeyWhichYouAreMissing.isLoading
    })

Best way to debbug is to replace your entire render with:

render() {
  console.log(this.state.email, this.state.password, this.props.isLoading)
  return null;
}

Upvotes: 0

Related Questions