0

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>
}
Elikill58
  • 4,050
  • 24
  • 23
  • 45
tanu
  • 13
  • 4

0 Answers0