Cannot read property 'props' of undefined ReactJS

Question

I'm getting error "Cannot read property 'props' of undefined" in ReactJS. I want to route the page to another page after login and also pass the user token for the session till logout for my app. My code :

    ...
    import { withRouter } from 'react-router';
    import { EventList } from "../EventList/EventList";

    export class SignIn extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          fields: {
            username: '',
            password: ''
          },
          errors: {}
        }
        this.onSubmit = this.onSubmit.bind(this);
      }
      ...
      onSubmit(e){
        e.preventDefault();
        if(this.handleValidation()){
          var apiBaseUrl = "http://api.eventsacross-stage.railsfactory.com/api/";
          var input = this.state.fields;
          axios.post(apiBaseUrl+'v1/users/signin', input)
          .then(function (response) {
             console.log(response);
             if(response.data.status == 200){
               console.log("Login successful");
               alert("Login successful");
               this.props.router.push('/EventList');
             }
             else if(...
             }
           })...
           });
         }
      }
    ...
      render() {
        return (
          ...
          <button type="submit" className="btn btn-primary btn-lg pull-right" onClick={this.onSubmit}>Sign In</button>
...
        );
      }
    }

    export default withRouter(SignIn);

Can you at least point what line is breaking? Where is onSubmit being called? — iagowp
– iagowp, Commented Oct 30, 2017 at 13:23
Please edit your post to show that. Also, put the code where onSubmit is being called — iagowp
– iagowp, Commented Oct 30, 2017 at 13:25

Borys Kupar · Accepted Answer · 2017-10-30 15:54:32Z

3

As it has been pointed out by @astorga, you have wrong context for 'this'. But I would recommend using Arrow Function instead of storing 'that' variable.

onSubmit(e) {
    e.preventDefault();
    if(this.handleValidation()){
        var apiBaseUrl = "http://api.eventsacross-stage.railsfactory.com/api/";
        var input = this.state.fields;
        axios.post(apiBaseUrl+'v1/users/signin', input)
          .then((response) => { // Arrow function here, which doesn't create new 'this' scope
             if(response.data.status == 200) {
               this.props.router.push('/EventList');
             }
             else if(...
             }
          });
       }
    }
}

answered Oct 30, 2017 at 15:54

Borys Kupar

1,73112 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

astorga · Accepted Answer · 2017-10-30 15:17:28Z

1

this inside then function has a value different than this of onSubmit function. You can read more about this behaviour over here: this|MDN

For this to work, you should store correct this value in another variable, just like @thomas-lin said:

onSubmit(e){
  var that = this;
  // ...
  // later, on axios call:
  axios.post(apiBaseUrl+'v1/users/signin', input)
  .then(function (response) {
    console.log(response);
    if(response.data.status == 200){
      console.log("Login successful");
      alert("Login successful");
      that.props.router.push('/EventList');
    }
    else if(...) {
      //...
    }
  })

edited Oct 30, 2017 at 15:17

answered Oct 30, 2017 at 14:09

astorga

1,6311 gold badge10 silver badges8 bronze badges

Comments

Thomas.lin · Accepted Answer · 2017-10-30 13:37:34Z

1

It is the wrong use of "this" that lead to this mistake,try the code like this:

onSubmit(e){
  var that = this
  .....
  that.props.router.push('/EventList');

}

answered Oct 30, 2017 at 13:37

Thomas.lin

4401 gold badge6 silver badges11 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'props' of undefined ReactJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related