React Bootstrap 5 - Tabs component with Previous Next Button

user_11349422 0
Viewed 319

I have a requirement to create a step component using React Bootstrap 5. Here I am using the Tabs component to achieve it. How do add Previous and Next buttons for controlling Tabs? The functionality is to enable the Next Tab using the Next button on condition and the Previous button is just to visit the previous Tab.

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Tabs, Tab, Row, Button, Col, Container } from "react-bootstrap";
import Home from './Components/TabComponents/Home';
import Profile from './Components/TabComponents/Profile';
import Contact from './Components/TabComponents/Contact';

export default function App() {
  return (
    <>
      <Container>
        <Row>
          <Col>
            <Tabs defaultActiveKey={"home"} id="controlled-tab-example">
              <Tab eventKey="home" title="Home" >
                <Home />
              </Tab>
              <Tab eventKey="profile" title="Profile" disabled>
                <Profile />
              </Tab>
              <Tab eventKey="contact" title="Contacts" disabled>
                <Contact />
              </Tab>
            </Tabs>
          </Col>
        </Row>
        <Button className='success'>Prev</Button>
        <Button className='success'>Next</Button>
      </Container>
    </>
  );
}
react-bootstrap reactjs
1 Answers

You can pass numbers to eventKeys too, not only strings. On button click you then just increment or decrement the number. Also provide appropriate disabled state for Tabs and Buttons:

export default function App() {
  const [currentTab, setCurrentTab] = React.useState(0);
  return (
    <Container>
      <Row>
        <Col>
          <Tabs activeKey={currentTab} id="controlled-tab-example">
            <Tab eventKey={0} title="Home" disabled={currentTab !== 0}>
              Home
            </Tab>
            <Tab eventKey={1} title="Profile" disabled={currentTab !== 1}>
              Profile
            </Tab>
            <Tab eventKey={2} title="Contacts" disabled={currentTab !== 2}>
              Contacts
            </Tab>
          </Tabs>
        </Col>
      </Row>
      <Stack gap={3} direction="horizontal" className="mt-3">
        <Button
          className="success"
          disabled={currentTab === 0}
          onClick={() => setCurrentTab((prev) => prev - 1)}
        >
          Prev
        </Button>
        <Button
          className="success"
          disabled={currentTab === 2}
          onClick={() => setCurrentTab((prev) => prev + 1)}
        >
          Next
        </Button>
      </Stack>
      <p>Current tab index is {currentTab}</p>
    </Container>
  );
}

https://codesandbox.io/s/unruffled-estrela-ebtioq

user_59804130
Related