If you're working with class components, remember that hooks cannot be used inside them. Hooks should only be used in functional components. Instead, rely on this.state and this.setState for managing state.
handleChange = (event, newValue) => {
this.setState({
value: newValue;
});
};
Alternatively, consider refactoring your component into a functional one. Here's a simplified version without the selected button:
const SimpleTabs = (props) => {
const { classes } = props;
const [value, setValue] = useState(0);
const handleChange = useCallback((event, newValue) => {
setValue(newValue);
}, [])
return (
<div className={classes.root}>
<AppBar position="static">
<Tabs value={value} onChange={handleChange}>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
</Tabs>
</AppBar>
{value === 0 && <TabContainer>Item One</TabContainer>}
{value === 1 && <TabContainer>Item Two</TabContainer>}
{value === 2 && <TabContainer>Item Three</TabContainer>}
</div>
);
}