title: Failed prop type: Invalid prop `errors` of type `string` supplied to `CreateProfile`, expected `object`
body: <blockquote>
    <p>I am trying to create a profile for a user on login, after submitting
    the form I am getting the error as invalid props errors. As both my
    client and server are running.I am using redux in my react app. Below
    is my code. I am building a MERN stack application. 
    I am trying to create a profile for a user on login, after submitting
    the form I am getting the error as invalid props errors. As both my
    client and server are running.I am using redux in my react app. Below
    is my code. I am building a MERN stack application. </p>
  </blockquote>
  
  <pre><code> import React, { Component } from "react";
      import { connect } from "react-redux";
      import { withRouter } from "react-router-dom";
      import PropTypes from "prop-types";
      import TextFieldGroup from "../common/TextFieldGroup";
      import TextAreaFieldGroup from "../common/TextAreaFieldGroup";
      import SelectListGroup from "../common/SelectListGroup";
      import InputGroup from "../common/InputGroup";
      import { createProfile } from "../../actions/profileActions";
  
      class CreateProfile extends Component {
        constructor(props) {
          super(props);
          this.state = {
            displaySocialInputs: false,
            handle: "",
            company: "",
            website: "",
            location: "",
            status: "",
            skills: "",
            githubusername: "",
            bio: "",
            twitter: "",
            facebook: "",
            linkedin: "",
            youtube: "",
            instagram: "",
            errors: {}
          };
          this.onChange = this.onChange.bind(this);
          this.onSubmit = this.onSubmit.bind(this);
        }
  
        componentWillReceiveProps(nextProps) {
          if (nextProps.errors) {
            this.setState({ errors: nextProps.errors });
          }
        }
  
        onSubmit(e) {
          e.preventDefault();
  
          const profileData = {
            handle: this.state.handle,
            company: this.state.company,
            website: this.state.website,
            location: this.state.location,
            status: this.state.status,
            skills: this.state.skills,
            githubusername: this.state.githubusername,
            bio: this.state.bio,
            twitter: this.state.twitter,
            facebook: this.state.facebook,
            linkedin: this.state.linkedin,
            youtube: this.state.youtube,
            instagram: this.state.instagram
          };
          this.props.createProfile(profileData, this.props.history);
        }
  
        onChange(e) {
          this.setState({ [e.target.name]: e.target.value });
        }
  
        render() {
          const { errors, displaySocialInputs } = this.state;
  
          let socialInputs;
  
          if (displaySocialInputs) {
            socialInputs = (
              &lt;div&gt;
                &lt;InputGroup
                  placeholder="Twitter Profile URL"
                  name="twitter"
                  icon="fab fa-twitter"
                  value={this.state.twitter}
                  onChange={this.onChange}
                  error={errors.twitter}
                /&gt;
  
                &lt;InputGroup
                  placeholder="Facebook Page URL"
                  name="facebook"
                  icon="fab fa-facebook"
                  value={this.state.facebook}
                  onChange={this.onChange}
                  error={errors.facebook}
                /&gt;
  
                &lt;InputGroup
                  placeholder="Linkedin Profile URL"
                  name="linkedin"
                  icon="fab fa-linkedin"
                  value={this.state.linkedin}
                  onChange={this.onChange}
                  error={errors.linkedin}
                /&gt;
  
                &lt;InputGroup
                  placeholder="YouTube Channel URL"
                  name="youtube"
                  icon="fab fa-youtube"
                  value={this.state.youtube}
                  onChange={this.onChange}
                  error={errors.youtube}
                /&gt;
  
                &lt;InputGroup
                  placeholder="Instagram Page URL"
                  name="instagram"
                  icon="fab fa-instagram"
                  value={this.state.instagram}
                  onChange={this.onChange}
                  error={errors.instagram}
                /&gt;
              &lt;/div&gt;
            );
          }
  
          //select options for status
          const options = [
            { label: "* Select Professional Status", value: 0 },
            { label: "Developer", value: "Developer" },
            { label: "Junior Developer", value: "Junior Developer" },
            { label: "Senior Developer", value: "Senior Developer" },
            { label: "Manager", value: "Manager" },
            { label: "Student or Learning", value: "Student or Learning" },
            { label: "Instructor or Teacher", value: "Instructor or Teacher" },
            { label: "Intern", value: "Intern" },
            { label: "Other", value: "Other" }
          ];
  
          return (
            &lt;div className="create-profile"&gt;
              &lt;div className="container"&gt;
                &lt;div className="row"&gt;
                  &lt;div className="col-md-8 m-auto"&gt;
                    &lt;h1 className="display-4 text-center"&gt;Create Your Profile&lt;/h1&gt;
                    &lt;p className="lead text-center"&gt;
                      Let's get some information to make your profile stand out
                    &lt;/p&gt;
                    &lt;small className="d-block pb-3"&gt;* = required fields&lt;/small&gt;
                    &lt;form onSubmit={this.onSubmit}&gt;
                      &lt;TextFieldGroup
                        placeholder="* Profile Handle"
                        name="handle"
                        value={this.state.handle}
                        onChange={this.onChange}
                        error={errors.handle}
                        info="A unique handle for your profile URL. Your full name, company name, nickname"
                      /&gt;
                      &lt;SelectListGroup
                        placeholder="Status"
                        name="status"
                        value={this.state.status}
                        onChange={this.onChange}
                        options={options}
                        error={errors.status}
                        info="Give us an idea of where you are at in your career"
                      /&gt;
                      &lt;TextFieldGroup
                        placeholder="Company"
                        name="company"
                        value={this.state.company}
                        onChange={this.onChange}
                        error={errors.company}
                        info="Could be your own company or one you work for"
                      /&gt;
                      &lt;TextFieldGroup
                        placeholder="Website"
                        name="website"
                        value={this.state.website}
                        onChange={this.onChange}
                        error={errors.website}
                        info="Could be your own website or a company one"
                      /&gt;
                      &lt;TextFieldGroup
                        placeholder="Location"
                        name="location"
                        value={this.state.location}
                        onChange={this.onChange}
                        error={errors.location}
                        info="City or city &amp; state suggested (eg. Boston, MA)"
                      /&gt;
                      &lt;TextFieldGroup
                        placeholder="* Skills"
                        name="skills"
                        value={this.state.skills}
                        onChange={this.onChange}
                        error={errors.skills}
                        info="Please use comma separated values (eg.
                          HTML,CSS,JavaScript,PHP"
                      /&gt;
                      &lt;TextFieldGroup
                        placeholder="Github Username"
                        name="githubusername"
                        value={this.state.githubusername}
                        onChange={this.onChange}
                        error={errors.githubusername}
                        info="If you want your latest repos and a Github link, include your username"
                      /&gt;
                      &lt;TextAreaFieldGroup
                        placeholder="Short Bio"
                        name="bio"
                        value={this.state.bio}
                        onChange={this.onChange}
                        error={errors.bio}
                        info="Tell us a little about yourself"
                      /&gt;
                      &lt;div className="mb-3"&gt;
                        &lt;button
                          type="button"
                          onClick={() =&gt; {
                            this.setState(prevState =&gt; ({
                              displaySocialInputs: !prevState.displaySocialInputs
                            }));
                          }}
                          className="btn btn-light"
                        &gt;
                          Add Social Network Links
                        &lt;/button&gt;
                        &lt;span className="text-muted"&gt;Optional&lt;/span&gt;
                      &lt;/div&gt;
                      {socialInputs}
                      &lt;input
                        type="submit"
                        value="Submit"
                        className="btn btn-info btn-block mt-4"
                      /&gt;
                    &lt;/form&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          );
        }
      }
  
      CreateProfile.propTypes = {
        profile: PropTypes.object.isRequired,
        errors: PropTypes.object.isRequired
      };
      const mapStateToProps = state =&gt; ({
        profile: state.profile,
        errors: state.errors
      });
      export default connect(
        mapStateToProps,
        { createProfile }
      )(withRouter(CreateProfile));
  </code></pre>
  
  <hr>
  
  <pre><code>export const createProfile = (profileData, history) =&gt; dispatch =&gt; {
    axios
      .post("http://localhost:8080/api/profile", profileData)
      .then(res =&gt; history.push("/"))
      .catch(err =&gt;
        dispatch({
          type: GET_ERRORS,
          payload: err.response.data
        })
      );
  };
  ------------------------------------------------------------------
  server side route :-
  
  //post - api/profile   **private
  //create or edit user profile
  router.post(
    "/",
    passport.authenticate("jwt", { session: false }),
    (req, res) =&gt; {
      const { errors, isValid } = validateProfileInput(req.body);
  
      // Check Validation
      if (!isValid) {
        // Return any errors with 400 status
        return res.status(400).json(errors);
      }
  
      // Get fields
      const profileFields = {};
      profileFields.user = req.user.id;
      if (req.body.handle) profileFields.handle = req.body.handle;
      if (req.body.company) profileFields.company = req.body.company;
      if (req.body.website) profileFields.website = req.body.website;
      if (req.body.location) profileFields.location = req.body.location;
      if (req.body.bio) profileFields.bio = req.body.bio;
      if (req.body.status) profileFields.status = req.body.status;
      if (req.body.githubusername)
        profileFields.githubusername = req.body.githubusername;
      // Skills - Spilt into array
      if (typeof req.body.skills !== "undefined") {
        profileFields.skills = req.body.skills.split(",");
      }
  
      // Social
      profileFields.social = {};
      if (req.body.youtube) profileFields.social.youtube = req.body.youtube;
      if (req.body.twitter) profileFields.social.twitter = req.body.twitter;
      if (req.body.facebook) profileFields.social.facebook = req.body.facebook;
      if (req.body.linkedin) profileFields.social.linkedin = req.body.linkedin;
      if (req.body.instagram) profileFields.social.instagram = req.body.instagram;
  
      Profile.findOne({ user: req.user.id }).then(profile =&gt; {
        if (profile) {
          // Update
          Profile.findOneAndUpdate(
            { user: req.user.id },
            { $set: profileFields },
            { new: true }
          ).then(profile =&gt; res.json(profile));
        } else {
          // Create
  
          // Check if handle exists
          Profile.findOne({ handle: profileFields.handle }).then(profile =&gt; {
            if (profile) {
              errors.handle = "That handle already exists";
              res.status(400).json(errors);
            }
  
            // Save Profile
            new Profile(profileFields).save().then(profile =&gt; res.json(profile));
          });
        }
      });
    }
  );
  </code></pre>