Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

149
Vistas
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 la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda