CODEWITHSUNDEEP
javascriptreactjsreact-proptypes
ST80
ST80

Reputation: 3903

React How to fix Failed prop type - Invalid prop of type string expected object

I'm building a small react-app where among other things users can register, login and so on. For the Login, I have created a loginform with additional error validation, coming from the backend. Now when I try to login, and by purpose enter wrong credentials, nothing happens (which in some reason is right) but instead of my error messages, the console tells me about an error:

Failed prop type: Invalid prop `errors` of type `string` supplied to `Login`, expected `object`

Here is the code:

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import classnames from "classnames";
import { loginUser } from "../../actions/authActions";

class Login extends Component {
  constructor() {
   super();
   this.state = {
     email: "",
     password: "",
     errors: {}
   };

   this.onChange = this.onChange.bind(this);
   this.onSubmit = this.onSubmit.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.auth.isAuthenticated) {
      this.props.history.push("/mysite");
    }

    if (nextProps.errors) {
     this.setState({ errors: nextProps.errors });
    }
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  onSubmit(e) {
    e.preventDefault();

    const userData = {
      email: this.state.email,
      password: this.state.password
    };

    this.props.loginUser(userData);
  }

  render() {
    const { errors } = this.state;

    return (
      <div className="login">
        <div className="container">
          <div className="row">
            <div className="col-md-8 m-auto">
              <h1 className="display-4 text-center">Log In</h1>
               <p className="lead text-center">Sign in to your account</p>
               <form noValidate onSubmit={this.onSubmit}>
                 <div className="form-group">
                  <input
                   type="email"
                     className={classnames("form-control form-control-lg", {
                  "is-invalid": errors.email
                   })}
                  placeholder="Email Address"
                  name="email"
                  value={this.state.email}
                  onChange={this.onChange}
                 />
                 {errors.email && (
                   <div className="invalid-feedback">{errors.email}</div>
                 )}
               </div>
               <div className="form-group">
                 <input
                  type="password"
                  className={classnames("form-control form-control-lg", {
                  "is-invalid": errors.password
                  })}
                  placeholder="Password"
                  name="password"
                  value={this.state.password}
                  onChange={this.onChange}
                 />
                {errors.password && (
                  <div className="invalid-feedback">{errors.password}</div>
                )}
              </div>
              <input type="submit" className="btn btn-info btn-block mt-4" />
             </form>
           </div>
         </div>
       </div>
     </div>
    );
  }
}

Login.propTypes = {
  loginUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  errors: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth,
  errors: state.errors
});

export default connect(
  mapStateToProps,
 { loginUser }
)(Login);

I have no clue why that error appears!? Can someone help me out?

Upvotes: 9

Views: 43058

Answers (3)

user2716191
user2716191

Reputation: 11

Make sure your link is not misspelled,

export const loginUser=(userData)=>dispatch=>{
  axios.post('/api/users/login',userData)

not

export const loginUser=(userData)=>dispatch=>{
  axios.post('/api/user/login',userData)

users not user

Upvotes: -2

ChrKahl
ChrKahl

Reputation: 651

PropTypes expecting an object because of your propTypes definition

  erros: PropTypes.object.isRequired,

Use:

Login.propTypes = {
  loginUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  errors: PropTypes.string.isRequired
};

If it's no required your also have to define a defaultProp:

Login.propTypes ={
  errors: PropTypes.string,
}

Login.defaultProps = {
  errors: '',
}

Upvotes: 4

Ganesh chaitanya
Ganesh chaitanya

Reputation: 658

You are passing string as an error instead of object in the props for the Login component. Try console.log of "errors" in the component where Login component is rendered to see what value is getting set.

Upvotes: 3

Related Questions