react bootstrap onClick button

Question

created an Offcanvas component and inside it a Button having onClick event handler. the problem is whenever the component is loaded the onClick fires automatically. I don't have any idea why this happens so tried to find any instruction here. my code:

      <Offcanvas show={canvas} onHide={handleClose} scroll="true" style={{fontSize: 12}}>
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>
            <Row className="py-3">
              <Col>
                <h5>Order entries</h5>
              </Col>
              <Col>
                <Button variant="danger" onClick={alert('hello')}>Reset</Button>
              </Col>
            </Row>
          </Offcanvas.Title>

        </Offcanvas.Header>
        <Offcanvas.Body>
          <Entries />
        </Offcanvas.Body>
      </Offcanvas>

MortyDev · Accepted Answer · 2022-07-11 11:30:30Z

3

Just use a function inside event attributes to prevent the problem, like this:

<Button onClick={() => alert('hello')}>Reset</Button>

answered Jul 11, 2022 at 11:30

MortyDev

6347 silver badges9 bronze badges

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

Comments

ReaganS94 · Accepted Answer · 2022-07-11 11:33:40Z

2

Try changing onClick={alert('hello') to onClick={() => alert('hello')

Here's a good explanation

answered Jul 11, 2022 at 11:33

ReaganS94

871 gold badge2 silver badges8 bronze badges

Collectives™ on Stack Overflow

react bootstrap onClick button

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