React stateless functional component to class Component

Question

Can you help me in changing this React stateless functional component to React class based component including the withRouter and history object as given?

const Menu = withRouter(({history}) => (
   <AppBar>

   </AppBar>
))
export default Menu

Answer 1

First, create your class component and then, create a constructor for the class. You can then define the states required inside the constructor, something like this-

export default class Menu extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   SomeVar: xyz,
   AnotherVar: undefined
  }
 }

 render() {
  return withRouter(({history}) => (
   <AppBar> </AppBar>
  ));
 }
}

Answer 2

class Menu extends React.Component {
  render() {
    // you can use this.props.history anywhere in the class
    const { history } = this.props;
    return <AppBar>...</AppBar>
  }
}

export default withRouter(Menu);