Disable button after click in React

Question

I have this piece of code but can't work out how I can disable the button after Pay is clicked:

        } else if (paymentMethod.name === "Pay by Cash") {
            return (
                <Tab.Pane eventKey={paymentMethod.id} key={key}>
                    <h6 className="mb-3 mt-0 mb-3">Cash</h6>
                    {this.state.paymentMethodSelectionError && this.state.paymentMethodSelectionError !== "" && <Alert key="error_div" variant="danger">{this.state.paymentMethodSelectionError}</Alert>}
                    <p>You are paying by cash</p>
                    <Form.Group className="mb-0">
                        <Button className="btn btn-success btn-block btn-lg"
                            onClick={() => {
                                this.setState({
                                    selectedPaymentMethod: "not-charged",
                                    paymentGateway: paymentMethod.id
                                }, () => {
                                    this.setPaymentMethod()
                                })
                            }}>
                            PAY £{this.state.totalPay}<Icofont icon="long-arrow-right" /></Button>
                    </Form.Group>
                </Tab.Pane>)

Any help is appreciated

score 3 · Accepted Answer · 2021-05-02 11:27:54Z

3

You can put a state for disabling your button:

this.state = {
  disabled: false
}

In click function, change it to true:

const clickButton = () => {
  this.setState({ disabled: true });
}

Then change your HTML to something like this:

<button type="button" disabled={ this.state.disabled }>Click Me!</button>

Preview: Here

edited May 2, 2021 at 11:27

answered May 2, 2021 at 10:52

user9645391

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

2 Comments

Rutnet Over a year ago

Sorry I am a newbie on React, could you show an example using the code above

user9645391 Over a year ago

@Rutnet I added a link.

restricted-beam · Accepted Answer · 2021-05-02 11:16:05Z

0

Declare a new state variable to take care of the disabled button:

const [buttonState,setButtonState]=useState(false)

Attach a onClick handler to disable the button and also manage the disabled property of the button.

<button onClick={()=>{ setButtonState(true)}} disabled={buttonState}> PAY </button>

answered May 2, 2021 at 11:16

restricted-beam

1,8082 gold badges6 silver badges8 bronze badges

Comments

KcH · Accepted Answer · 2021-05-02 11:25:07Z

0

You can use state to control the button state

Preview for both Functional and Class components

Codesandbox Preview Link

answered May 2, 2021 at 11:25

KcH

3,5224 gold badges28 silver badges61 bronze badges

Collectives™ on Stack Overflow

Disable button after click in React

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related