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, ing 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);
  }

  ponentWillReceiveProps(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?

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, ing 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);
  }

  ponentWillReceiveProps(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?

• javascript
• reactjs
• react-proptypes

• 1 Login requires the prop 'errors' to be passed in, and it must be an object. errors: PropTypes.object.isRequired - this error tells you a string is being pass in instead. Can you show the code where Login is being used? – George Commented Feb 8, 2019 at 10:35

3 Answers 3

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: '',
}

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

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