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

Juan P. Ortiz

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.

enter image description here

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

Andrew

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Failed prop type The prop is marked as required but its value is `undefined`

How to fix this issue “Warning: Failed prop type: The prop `title` is marked as required in `Tab`, but its value is `undefined`.”

Warning: Failed prop type: The prop `store` is marked as required in `Provider`, but its value is `undefined`. in Provider

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

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

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

Warning: Failed prop type: The prop `createCourse` is marked as required in `CoursesPage`, but its value is `undefined`

Warning: Failed prop type: The prop open is marked as required in Snackbar, but its value is undefined

Failed prop type: The prop todos[0].id is marked as required in TodoList, but its value is undefined

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

Warning: Failed prop type: The prop `todos[0].title` is marked as required in `TodoList`, but its value is `undefined`

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

Warning: Failed prop type: The prop `alt` is marked as required in `MainImage`, but its value is `undefined`. MainImage

React - Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`

Prop is marked as required in component, but its value is `undefined`

Failed prop type: The prop `children` is marked as required in `e`, but its value is `null`

reactjs Delete Operation Warning: Failed prop type: The prop `role` is marked as required in `ManageRolePage`, but its value is `null`

The prop `history` is marked as required in `Router`, but its value is `undefined`. in Router

The prop `classes` is marked as required in `FullWidthGrid`, but its value is `undefined`

The prop `children` is marked as required in `Button`, but its value is `undefined`

The prop `checked` is marked as required in `ToggleSwitch`, but its value is `undefined`

React Native: Failed prop type: the prop businessPhoneNumberChanged is marked as required

React-Native this prop randomNumberCount is marked as required in Game ,but its value undefined

React-redux error "The prop `store` is marked as required in `Root`, but its value is `undefined"

ReactJS Failed Prop Type With 'undefined' Value

Failed prop type: Invalid prop 'value'

Failed prop type. Required prop types are undefined in my redux store

Failed prop type: Invalid prop `value` of type `number`

React - prop-types is marked as required

TOP Ranking

  1. 1

    Failed to listen on localhost:8000 (reason: Cannot assign requested address)

  2. 2

    Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

  3. 3

    How to import an asset in swift using Bundle.main.path() in a react-native native module

  4. 4

    pump.io port in URL

  5. 5

    Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

  6. 6

    Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

  7. 7

    Do Idle Snowflake Connections Use Cloud Services Credits?

  8. 8

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

  9. 9

    Binding element 'string' implicitly has an 'any' type

  10. 10

    BigQuery - concatenate ignoring NULL

  11. 11

    Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

  12. 12

    In Skype, how to block "User requests your details"?

  13. 13

    Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

  14. 14

    Pandas - check if dataframe has negative value in any column

  15. 15

    flutter: dropdown item programmatically unselect problem

  16. 16

    Generate random UUIDv4 with Elm

  17. 17

    Is it possible to Redo commits removed by GitHub Desktop's Undo on a Mac?

  18. 18

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  19. 19

    Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

  20. 20

    EXCEL: Find sum of values in one column with criteria from other column

  21. 21

    How to use merge windows unallocated space into Ubuntu using GParted?

HotTag

Archive