How do I add a delay on a button click in react?

Question

I'm attempting to delay a button click so that the library I'm using can make a quick api call for validation. I'm currently using an arrow function in react and attempting setTimeout. However it appears this is triggering a call on page load for some reason. Here's my code.

  onClick={this.handleCardSubmit}

handleCardSubmit = setTimeout(() => {
    this.setState({ showLoaderForPayment: true });
    const { collectJs } = this.state;
    collectJs.startPaymentRequest();
    this.setState({ isPaymentRequestCalled: true });
  }, 500);

onClick={this.handleCardSubmit} try this onClick={()=>this.handleCardSubmit()} — Narendra Chouhan
– Narendra Chouhan, Commented Nov 22, 2019 at 5:03
You are not using evt.preventDefault(), you are not returning false; if your button is a submit button, it will do what submit buttons do: submit. — Amadan
– Amadan, Commented Nov 22, 2019 at 5:04
why cant you use setTimeout for onclick then ? onClick={()=>setTimeout(() => {this.handleCardSubmit()},500)} ..just asking ? — RenJith
– RenJith, Commented Nov 22, 2019 at 5:06

developerKumar · Accepted Answer · 2019-11-22 05:07:34Z

2

Hi you need to change you function declaration and definition as follows

handleCardSubmit = ()=>{
setTimeout(() => {
    this.setState({ showLoaderForPayment: true });
    const { collectJs } = this.state;
    collectJs.startPaymentRequest();
    this.setState({ isPaymentRequestCalled: true });
  }, 500);
}

In you code snippet, you are just passing the settimeout function reference to handeCardSubmit , so there is not binding of this. In order to execute it properly, you will have to write setTimeout function inside an arrow function, then it will work as with delay of 500ms.

answered Nov 22, 2019 at 5:07

developerKumar

1,79612 silver badges14 bronze badges

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

Comments

Pushprajsinh Chudasama · Accepted Answer · 2019-11-22 05:51:54Z

0

You can use e.preventDefault(), and try the below code.

handleCardSubmit = (e) => {
    e.preventDefault();
    setTimeout(() => {
    this.setState({ showLoaderForPayment: true });
    const { collectJs } = this.state;
    collectJs.startPaymentRequest();
    this.setState({ isPaymentRequestCalled: true });
  }, 500);
};

Or you can use async-await.

handleCardSubmit = async (e) => {
    e.preventDefault();
    await setdata();

    setdata() {
    this.setState({ showLoaderForPayment: true });
    const { collectJs } = this.state;
    collectJs.startPaymentRequest();
    this.setState({ isPaymentRequestCalled: true });
}
};

answered Nov 22, 2019 at 5:51

Pushprajsinh Chudasama

7,9994 gold badges23 silver badges48 bronze badges

Collectives™ on Stack Overflow

How do I add a delay on a button click in react?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related