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