ReactJS Material UI disable other tabs on button click [closed] - reactjs

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 19 days ago.
Improve this question
Have similar code with action for a Button component click in each tab
https://codesandbox.io/embed/cbn97?codemirror=1
How can I disable other tabs on Button click in current tab?
How can I pass a "disabled" property to already displayed, rendered tab component, update it?
New to ReactJS

Answer 1

Since you've indicated in the comments that the current page may also be disabled I suggest you do something like this:
export default function SimpleTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const [isLoading, setIsLoading] = React.useState(false)
const handleOperation = () => {
setIsLoading(true)
// Do some synchronous operation that takes time
setIsLoading(false)
}
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<AppBar position="static">
<Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
<Tab label="Item One" {...a11yProps(0)} disabled={isLoading}/>
<Tab label="Item Two" {...a11yProps(1)} disabled={isLoading}/>
<Tab label="Item Three" {...a11yProps(2)} disabled={isLoading}/>
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
<button onClick={handleOperation}>start operation</button>
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Three
</TabPanel>
</div>
);
}
So the approach above is to create an isLoading state that identifies whether one of your tab button operations is in progress. Inside your tab button handler function(s) set isLoading to true making the tabs disabled and set isLoading to false after the operation is done.

Answer 2

Just put result of functions with conditions to disabled prop of your tabs:
export default function SimpleTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const [operationDone, setOperationDone] = React.useState(false)
const handleChange = (event, newValue) => {
setValue(newValue);
};
const isDisabled = (tabIndex) => {
if(operationDone) {
return false;
}
else {
if(value !== tabIndex) {
return true;
}
return false;
}
}
return (
<div className={classes.root}>
<AppBar position="static">
<Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
<Tab label="Item One" disabled={isDisabled(0)} {...a11yProps(0)} />
<Tab label="Item Two" disabled={isDisabled(1)} {...a11yProps(1)} />
<Tab label="Item Three" disabled={isDisabled(2)} {...a11yProps(2)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
<button onClick={() => setOperationDone(true)}>change operation done</button>
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Three
</TabPanel>
</div>
);
}