React — How to make a button (that prevents double clicking while handling HTTP requests)

Question

**trying the following The button will first be disabled when the promise fires. It will remain disabled until the promise resolves, where it will then be enabled again. Please advise as I am stuck here and not sure whether its the right thing **

let [enabled] = useState(false);
const getTotal = event => {
        enabled = false;
        calTotal().then(validateResult => {
           // enabled = true;
        });
    }
    <Button 
    onClick={() => new Promise((resolve) => {
              resolve({
                      getTotal();
                     })
                 })}>Get Total</Button>

Does this answer your question? [ReactJs: Prevent multiple times button press](https://stackoverflow.com/questions/35315872/reactjs-prevent-multiple-times-button-press) — Alexander Staroselsky, Apr 27 '20 at 20:16

score 1 · Answer 1 · answered Apr 27 '20 at 20:27

There are a few things to consider:

You are not setting the state of enabled correctly - you need to use the function from the useState hook
You don't need to wrap the onClick in a promise
You are not binding the button disabled property to your enable variable
Your initial state of enabled will need to be true in order to be able to click the button

See adjustments here:

let [enabled, setEnabled] = useState(true);
const getTotal = event => {
    setEnabled(false)
    calTotal().then(validateResult => {
       setEnabled(true)
    });
}
<Button disabled={!enabled} onClick={() => getTotal()}>Get Total</Button>

React — How to make a button (that prevents double clicking while handling HTTP requests)

1 Answers1