Change active tab on click react js

Question

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.Item>
                      <Nav.Link eventKey="first">Se connecter</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link eventKey="second">Se créer un compte</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                      <Nav.Link eventKey="third">Plus d'informations</Nav.Link>
                    </Nav.Item>
                  </Nav>
                </Col>
                <Col className="account-col" md={{ span: 7, offset: 1 }} style={{border: "1px solid #084A83", background: "white"}}>
                  <Tab.Content>
                    <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>
                        </Form.Group>
                      </Form>
                    </Tab.Pane>
                    <Tab.Pane eventKey="second">
                        <p>Second</p>
                    </Tab.Pane>
         </Tab.Content>
</Tab.Container>

My handleSelect() function looks like this:

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

Thank you for your help.

Answer 1

You need to use some state to represent the currently selected tab. Then you can set this state from either navs or your external component.

Add this inside your component function:

  const [currentTab, setCurrentTab] = useState("first");

  const handleSelect = (eventKey) => {
    setCurrentTab("second");
  };

Obviously this will only select the second tab, but that seems to be what you wanted in your example.

Then change your Tab.Container to:

    <Tab.Container
      defaultActiveKey="first"
      activeKey={currentTab}
      onSelect={(key) => setCurrentTab(key)}
    >

So this will allow to also change the selection from Nav s themeselves.

Here's a sandbox link with a working example.