React: Disabling Tabs conditionally

[pgarciamunoz]

Hi community,

I'd like to ask for guidance on implementing Tabs in a React component and disabling them conditionally.

For example, for the following tabs I want to disable the Manager tab if/when the user role is an apprentice:

<TabList aria-label="Vertical product tabs"> <Tab id={selectedId}>Apprentice</Tab> <Tab disabled >Manager</Tab> <Tab>Reviewer</Tab> </TabList>

What type of logic can I build to handle disabling conditionally?

[gloriliale]

Hi @pgarciamunoz!
The easiest way to do this is to add a state to your application. This way, you can check that state and set the disabled prop to be true if the role is apprentice, and false if it is not (or use more complex logic that makes most sense for your app). Here's a codesanbox that shows this in action in the simplest way. I also included a button that changes the state of the app so you can see that the tab becomes disabled/not disabled when the state changes.

Let me know if that helps and if you have any other questions!