Skip to main content
se añadieron 917 caracteres en el cuerpo
Origen Enlace

Como la cantidad de Tabs es pequeña, perfectamente puedes condicionar el disabled de esta manera

disabled={selectedTab >= 2}

El límite debería ser siempre uno menos que la cantidad total de tabs, ya que estas inicializando el state en 0.

Una mejor forma de controlar el habilitar/deshabilitar sin tener que colocar en duro el valor, sería crear un listado con la cantidad de tabs y recorrerlo en tu componente. Pero

Por ejemplo

const [data, setData] = useState([{...}, {...}, {...}])

<>
  <Tabs defaultTab={selectedTab.toString()}>
    <TabList>
      {data.length > 0 && data.map((item, index) => <Tab tabFor={index}>{`Tab ${index + 1}`}</Tab>)}
    </TabList>

    {data.length > 0 && data.map((item, index) => (
      <TabPanel key={index} tabId={index}>
        <p>{item.name}</p>
      </TabPanel>
    ))}
  </Tabs>
            
  <button onClick={() => setSelectedTab(selectedTab - 1)} disabled={selectedTab <= 0}>
    Back
  </button>
  
  <button onClick={() => setSelectedTab(selectedTab + 1)} disabled={selectedTab > data.length - 1}>
    Next
  </button>
</>

Suponiendo que tu state data ya esta con información, obviamente esto sería una mejorasólo validar que el tab seleccionado sea mayor a la cantidad de registros - 1, ya que partimos contando desde 0.

Acá te dejo el ejemplo completo para tu análisis.

Nos comentas si tienes dudas

Como la cantidad de Tabs es pequeña, perfectamente puedes condicionar el disabled de esta manera

disabled={selectedTab >= 2}

El límite debería ser siempre uno menos que la cantidad total de tabs, ya que estas inicializando el state en 0.

Una mejor forma de controlar el habilitar/deshabilitar sin tener que colocar en duro el valor, sería crear un listado con la cantidad de tabs y recorrerlo en tu componente. Pero, obviamente esto sería una mejora.

Nos comentas si tienes dudas

Como la cantidad de Tabs es pequeña, perfectamente puedes condicionar el disabled de esta manera

disabled={selectedTab >= 2}

El límite debería ser siempre uno menos que la cantidad total de tabs, ya que estas inicializando el state en 0.

Una mejor forma de controlar el habilitar/deshabilitar sin tener que colocar en duro el valor, sería crear un listado con la cantidad de tabs y recorrerlo en tu componente.

Por ejemplo

const [data, setData] = useState([{...}, {...}, {...}])

<>
  <Tabs defaultTab={selectedTab.toString()}>
    <TabList>
      {data.length > 0 && data.map((item, index) => <Tab tabFor={index}>{`Tab ${index + 1}`}</Tab>)}
    </TabList>

    {data.length > 0 && data.map((item, index) => (
      <TabPanel key={index} tabId={index}>
        <p>{item.name}</p>
      </TabPanel>
    ))}
  </Tabs>
            
  <button onClick={() => setSelectedTab(selectedTab - 1)} disabled={selectedTab <= 0}>
    Back
  </button>
  
  <button onClick={() => setSelectedTab(selectedTab + 1)} disabled={selectedTab > data.length - 1}>
    Next
  </button>
</>

Suponiendo que tu state data ya esta con información, sería sólo validar que el tab seleccionado sea mayor a la cantidad de registros - 1, ya que partimos contando desde 0.

Acá te dejo el ejemplo completo para tu análisis.

Nos comentas si tienes dudas

Origen Enlace

Como la cantidad de Tabs es pequeña, perfectamente puedes condicionar el disabled de esta manera

disabled={selectedTab >= 2}

El límite debería ser siempre uno menos que la cantidad total de tabs, ya que estas inicializando el state en 0.

Una mejor forma de controlar el habilitar/deshabilitar sin tener que colocar en duro el valor, sería crear un listado con la cantidad de tabs y recorrerlo en tu componente. Pero, obviamente esto sería una mejora.

Nos comentas si tienes dudas