react bootstrap onClick button-CodePudding

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>

CodePudding user response：

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

Here's a good explanation

CodePudding user response：

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

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