onClick not firing click handler

Question

My click handler doesn't fire:

submitForm(UserDetails) {
    axios
        .post('http://localhost:3001/api/users', UserDetails)
        .then(function(response) {
            console.log(response);
        })
        .catch(function(error) {
            console.log(error);
        });
}

ON my button:

<button
            className="btn btn-primary"
            onClick={this.submitForm(this.props.UserDetails)}>
            Upload
        </button>

I have bound it to this, in my constructor:

constructor() {
    super();
    this.submitForm = this.submitForm.bind(this);
}

Any ideas?

is there any error, in the console?

abdul
– abdul

2017-08-08 07:52:46 +00:00
Commented Aug 8, 2017 at 7:52 — abdul
– abdul, Commented Aug 8, 2017 at 7:52

Karim · Accepted Answer · 2017-08-08 08:02:35Z

1

In the onClick hook you're invoking the function instead of passing a reference of the function

<button
  className="btn btn-primary"
  onClick={this.submitForm(this.props.UserDetails)}>
  Upload
</button>

remove the bind from the constructor

this.submitForm = this.submitForm.bind(this);

and pass a proper function to the onClick

<button
  className="btn btn-primary"
  onClick={(e) => this.submitForm(this.props.UserDetails)}>
  Upload
</button>

edited Aug 8, 2017 at 8:02

answered Aug 8, 2017 at 7:57

Karim

8,6823 gold badges27 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

onClick not firing click handler

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related