Change active tab on click react js

I am using React.Bootstrap and I am trying to change the active tab using a inside a tab. For example, I am in tab 1 and I would like to go to tab 2 WITHOUT using the nav links that I have outside my tabs.

Here’s the code

    <Tab.Container defaultActiveKey="first">
                <Col md={3} style={{border: "1px solid #084A83", background: "white", height: "150px"}}>
                  <Nav variant="pills" className="flex-column" align="left">
                      <Nav.Link eventKey="first">Se connecter</Nav.Link>
                      <Nav.Link eventKey="second">Se créer un compte</Nav.Link>
                      <Nav.Link eventKey="third">Plus d'informations</Nav.Link>
                <Col className="account-col" md={{ span: 7, offset: 1 }} style={{border: "1px solid #084A83", background: "white"}}>
                    <Tab.Pane eventKey="first">
                        <Form.Group className="mb-3" controlId="formBasicName">
                            <a onClick={handleSelect} className="btn btn-primary" style={{background: "transparent", border: "1px solid #084A83", borderRadius: "0px", marginTop: "10px", marginBottom: "10px", textAlign: "center", color: "black"}}>Se créer un compte</a>
                    <Tab.Pane eventKey="second">

My handleSelect() function looks like this :

const handleSelect = (eventKey) => {
        eventKey = "second"

Thank you for your help.

Source: React – Stack Overflow

November 20, 2021
Category : News
Tags: javascript | react-bootstrap | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.