Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

158
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda