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

Why not use [react hooks](https://reactjs.org/docs/hooks-intro.html)? — Min Lee, Nov 25 '19 at 19:24
Could you explain it more please? how can i solve this by using react hooks? — Chaudhary Ali Sandhu, Nov 25 '19 at 19:27
[Converting React function component to class component](https://stackoverflow.com/q/43695583/1218980) — Emile Bergeron, Nov 25 '19 at 19:35
I can not use react hooks, i am using an older version of react in my project and i cant update it due to some other dependency issues — Chaudhary Ali Sandhu, Nov 25 '19 at 19:35
[Using React Router withRouter](https://stackoverflow.com/q/39174814/1218980) — Emile Bergeron, Nov 25 '19 at 19:36

Xvistasss · Answer 1 · 2019-11-25T20:26:44.443

0

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

edited Nov 25 '19 at 20:26

answered Nov 25 '19 at 19:53

Xvistasss

66
9

Was it helpful. Please let me know. – Xvistasss Nov 25 '19 at 20:25

score 0 · Accepted Answer · answered Nov 25 '19 at 22:52

0

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);

answered Nov 25 '19 at 22:52

helloitsjoe

6,264
3
19
32

React stateless functional component to class Component

2 Answers2