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

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

1. Replace

<Tabs value={this.state.value} onChange={this.handleChange()}

by

<Tabs value={this.state.value} onChange={this.handleChange}

2. 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);
    }
  );
};