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>
</>
);
}
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>
);
}