Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

148
Views
React Tabs - unable to move to next and previous tab programatically using buttons

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>
}
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!