Failed prop type: The prop `userSignUpRequest` is marked as required in `Login`, but its value is `undefined`

Question

Im trying to create a React Component using Redux and with functions userSignUpRequest I follow a tutorial but still getting the error: I think is possible becouse I use module.exports to export my component instead of export by default but im not sure how to fix it.

My Store:

const middleware = routerMiddleware(hashHistory);
const store = createStore(
  reducers,
  applyMiddleware(middleware)
);

render(
  <Provider store={store}>
    <Router
      onUpdate={scrollToTop}
      history={history}
      routes={rootRoute}
    />
  </Provider>,
  document.getElementById('app-container')
);

This is my Component:

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux'; //to pass functions
import { userSignUpRequest } from '../../../actions/loginAxios'; 

class Login extends React.Component {
  constructor() {
    super();
    this.state = {
      {** initial state **}
    };
  }

  onSubmit(e) {
    e.preventDefault();
    if(this.isValid()){
      //reset errros object and disable submit button
      this.setState({ errors: {}, isLoading: true });

      //we store  a function in the props
      this.props.userSignUpRequest(this.state).then(
        (response) => {
          //succes redirect
          this.context.router.history.push('/');
        },
        (error) => {
          console.log("error");
          this.setState({ errors: error.response.data, isLoading: false });
        });

    } else {
      console.log(this.state.errors);
    }

  }

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

  render() {
    const { errors } = this.state; //inicializate an get errors
    const { userSignUpRequest } = this.props;

    return (
      <div className="body-inner">
        {*** My React Login React Form ***}
      </div>
    );
  }
}

const Page = () => (
  <div className="page-login">
    <div className="main-body">
      <QueueAnim type="bottom" className="ui-animate">
        <div key="1">
          <Login />
        </div>
      </QueueAnim>
    </div>
  </div>
);

//To get the main Actions
Login.propTypes = {
  userSignUpRequest: PropTypes.func.isRequired

};

function mapStateToProps(state) {
  //pass the providers
  return {

  }
}

module.exports = connect(mapStateToProps, { userSignUpRequest })(Page);

This is my function "loginAxios.js"

import axios from "axios";

export function userSignUpRequest(userData) {
  return dispatch => {
    return axios.post("/api/users", userData);
  }
}

I am new to React so I would greatly appreciate your support!! Thanks

Answer 1

You explicitly use propTypes and even use isRequired, which is exactly what it sounds like.

Login.propTypes = {
  userSignUpRequest: PropTypes.func.isRequired
};

But in your Page component, you don't provide a prop name userSignUpRequest. You just have it as this:

<Login/>

If userSignUpRequest is fundamentally needed for that component to work, you need to pass it in.

<Login userSignUpRequest={() => myFunction()}/>

If it's not, then just delete your propTypes declaration.

Answer 2

You are importing the module userSignUpRequest. It doesn't appear you are passing it through as a prop. Try just calling your module without the "this.props"