I have a div in which i have 3 tabs and 2 buttons "Back" and "Next".
What I want to acheive is that on click of "Next" button I should move to the next tab and on click of "Back" button I should move to the previous tab.
I have used the below code but it is not working
const [ins, setIns] = useState(false)
const [pre, setPre] = useState(true);
const [ques, setQues] = useState(false);
const [selectedTab, setSelectedTab] = useState(0);
const tabCount = 3
const onTabClick = (category, val) => {
updateTab([category], val);
}
const updateTab = (category, type) => {
if (type === 'ins') {
setSelectedTab(0)
setIns(true)
setPre(false
setQues(false)
}
if (type === 'pre') {
setSelectedTab(1)
setIns(false)
setPre(true)
setQues(false)
}
if (type === 'ques') {
setSelectedTab(2)
setQues(true)
setIns(false)
setPre(false)
}
<div>
<ul>
<li className="nav-item">
<button
type="button"
className={ins ? 'nav-link pb-3 active' : 'nav-link pb-3'}
onClick={() => { onTabClick('infoTabs', 'ins') }}>
Ins
</button>
</li>
<li className="nav-item">
<button
type="button"
className={pre ? 'nav-link pb-3 active' : 'nav-link pb-3'}
onClick={() => { onTabClick('infoTabs', 'pre') }}>
Pre
</button>
</li>
<li className="nav-item">
<button
type="button"
className={ques ? 'nav-link pb-3 active' : 'nav-link pb-3'}
onClick={() => { onTabClick('infoTabs', 'ques') }} >
Ques
</button>
</li>
</div>
<div>
<button
type="button"
onClick={() => setSelectedTab((selectedTab + tabCount - 1) % tabCount )}
>
Back
</button>
</div>
<div >
<button
type="button"
onClick={() => setSelectedTab((selectedTab + 1) % tabCount )}
>
Next
</button>
</div>
}