Implementing react hooks useState in material-ui Tab container not working - reactjs

Question

I am trying to implement react-hooks useState in material-ui/tabs component. I am able to do it with function handleChange, but I am trying to learn to implement hooks. useState is working for input field but not for material-ui tabs onChange function. Following is my code:
const [value, setValue] = useState(0)
<Tabs
value={value}
onChange={(event) => setValue(event.target.value)}
variant="scrollable"
scrollButtons="on"
indicatorColor="primary"
textColor="primary"
>
<Tab label="All" />
{subjects.map((subject) => (
<Tab label={subject.subjectName} />
))}
</Tabs>
I tried console log with useEffect, and it returns undefined onChange

Answer 1

The main issue I see is that
onChange={(event) => setValue(event.target.value)}
should instead be:
onChange={(event, newValue) => setValue(newValue)}
The event in this case is just a click event and the target will be the particular DOM element clicked on which could be any one of several elements (e.g. span, button) that make up the Tab. Unlike with input elements, none of the DOM elements in the Tab have a value property, so Material-UI passes the value as a separate argument to the onChange function.
Here is the relevant code from the Tab component:
handleChange = event => {
const { onChange, value, onClick } = this.props;
if (onChange) {
onChange(event, value);
}
if (onClick) {
onClick(event);
}
};
You'll find the onChange signature documented in the documentation for the Tabs props: https://material-ui.com/api/tabs/#props
onChange func Callback fired when the value changes. Signature: function(event: object, value: number) => void
Here's a working example based on your code: