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

failed prop type: invalid prop `value` of type `boolean` supplied to `checkbox`, expected `string`.
failed prop type: invalid prop of type array supplied to expected object
invalid prop of type object expected function
warning: failed prop type: invalid prop expected a reactnode
invalid prop disabled of type string supplied to input expected boolean
failed prop type invalid prop value of type number supplied to textbox expected string
failed prop type invalid prop data of type string supplied to anonymous expected array
proptypes

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?

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.

Get warning: "Failed propType: Invalid prop `x` of type `string , Get warning: "Failed propType: Invalid prop `x` of type `string` supplied to ` Draggable`, expected `number`. I got this warning when using ReactGridLayout� The problem to me is the use of {input} props. Both knob component and DatePicker component has issue with it. Knob component has issue with Invalid prop value of type string supplied to Knob, expected number and DatePicker component has similar issue Invalid prop value of type string supplied to DatePicker, expected object.

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

Warning: Failed prop type: Invalid prop `value` of type `string , If i dont use {input} props i don't get Failed prop type error but error Invalid prop value of type string supplied to DatePicker, expected object. If you have a problem, you can always add simple console.log at the top of the https://github. com/joshjg/react-canvas-knob only accepts data related to the� Albert-Gao changed the title index.js:1452 Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`. [With React-router] Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`. Nov 13, 2018

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

React Warning: Failed prop type: Invalid prop of type `Object` supplied, React Warning: Failed prop type: Invalid prop of type `Object` supplied - reactjs. try to use shapes: plainObj: PropTypes.shape({ subProp: PropTypes.string }) and expect it as: export default class Detail extends Component { static propTypes the same warning with reversed problem - receiving array, expecting object,� Warning: Failed Prop type: Invalid prop ‘value’ of type ‘number’ supplied to ‘TextInput’, expected ‘string’ If you will see the code of the TextInput you will find we directly pass the value from the state/variable to the value prop.

Invalid prop 'value' of type 'number' supplied to, Warning: Failed Prop type: Invalid prop 'value' of type 'number' supplied to ' TextInput', But the prop value requires the value to be set in the string. cellKey` of type `number` supplied to `CellRenderer`, expected `string` � null is not an object Problem in Ejecting React Native Project (npm run eject issue) in version 0.57� I have these warning but my tables render fine. My data prop is static prop. of type. PropTypes.instanceOf(List).isRequired, It is part of a immutable record. here is my table class import React, { Component } from 'react' import Bootstr

Typechecking With PropTypes, PropTypes are a way to specify what the type of props in React components should be. a number of basic propTypes, like array, boolean, function, number, object, or string. Warning: Failed prop type: Invalid prop `formErrors` of type ` string` supplied to `FormErrors`, expected `object`. If we fix that by changing this. state. When I display the image, there is a warning that goes: Failed prop type: invalid prop 'source' supplied to 'Image'. Then the modal is fully black (no image is shown). However, the weird thing that happens is that when I start scrolling it to the right, and scroll back to left, the image appears. My image array object is something like that :

prop-types, Runtime type checking for React props and similar objects. PropTypes , the prop-types package provides single-file distributions, In this case, the fix is to make sure that you are passing all of the arguments to the inner function. Warning: Failed prop type: Invalid prop `age` of type `string` supplied to. The validator // will be called for each key in the array or object. The first two // arguments of the validator are the array or object itself, and the // current item's key. customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { if (!/matchme/.test(propValue[key])) { return new Error( 'Invalid prop `' + propFullName + '` supplied to' + ' `' + componentName + '`.

Comments
  • 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?
  • Empty errors object should be printed in the console as {} instead of an empty string. May be you can have a check if its an empty string send it as {} in the component where Login component is rendered.