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 pte</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 pte</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.

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 pte</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 pte</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.

• javascript
• reactjs
• react-bootstrap

1 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 ponent.

Add this inside your ponent 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 Navs themeselves.

Here's a sandbox link with a working example.