Material-ui component is not rendering in react class based component? - reactjs

Question

Material-ui component is not rendering in react class based component ?
I am trying to convert function based material-ui component in class based component but the class based component is not rendering... in main div in inspect main div not showing that component?
any idea how to use material-ui with class based component?
enter code here
import * as React from 'react';
import Box from '#mui/material/Box';
import Tabs from '#mui/material/Tabs';
import Tab from '#mui/material/Tab';
function LinkTab(props) {
return (
<Tab
component="a"
onClick={(event) => {
event.preventDefault();
}}
{...props}
/>
);
}
class Header extends Component {
constructor(props) {
super(props);
this.state = {
value: 0,
};
}
handleChange = (event, newValue) => {
this.setState(
(prevState) => (
{
value: newValue,
},
() => {
console.log("value", this.state.newValue);
}
)
);
};
render() {
return (
<Box sx={{ width: '100%' }}>
<Tabs value={this.state.value} onChange={this.handleChange()} aria-label="nav tabs example">
<LinkTab label="Page One" href="/drafts" />
<LinkTab label="Page Two" href="/trash" />
<LinkTab label="Page Three" href="/spam" />
</Tabs>
</Box>
);
}
}
export default Header;
import * as React from 'react';
import Box from '#mui/material/Box';
import Tabs from '#mui/material/Tabs';
import Tab from '#mui/material/Tab';
function LinkTab(props) {
return (
<Tab
component="a"
onClick={(event) => {
event.preventDefault();
}}
{...props}
/>
);
}
export default function header() {
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<Box sx={{ width: '100%' }}>
<Tabs value={value} onChange={handleChange} aria-label="nav tabs example">
<LinkTab label="Page One" href="/drafts" />
<LinkTab label="Page Two" href="/trash" />
<LinkTab label="Page Three" href="/spam" />
</Tabs>
</Box>
);
}

Answer 1

Replace
<Tabs value={this.state.value} onChange={this.handleChange()}
by
<Tabs value={this.state.value} onChange={this.handleChange}
Replace
handleChange = (event, newValue) => {
this.setState(
(prevState) => (
{
value: newValue,
},
() => {
console.log("value", this.state.newValue);
}
)
);
};
by
handleChange = (event, newValue) => {
this.setState(
{value: newValue},
() => {
console.log("value", this.state.newValue);
}
);
};