Add 2 HOC to a component in react

Question

I have a class component in a react js app, that I want it to use router and translation.

interface CommonHeaderProps extends RouteComponentProps<any> {
}

class CommonHeader extends React.Component<CommonHeaderProps> {  

  render() {


    return (
      <div>

      </div>
    );
  }
}

const mapStateToProps = (state: RootState) => ({

})

const mapDispatchToProps = {};

export default withRouter(connect(
    mapStateToProps,
    mapDispatchToProps
)(CommonHeader));

I would like this component to have be

withRouter()(Component) and withTransaltion()(Component)

but doing this do not work

export default withTranslation()(withRouter(connect(
    mapStateToProps,
    mapDispatchToProps
)(CommonHeader)));

Answer 1

You can do it as this

const Component = withRouter(connect(mapStateToProps,mapDispatchToProps(CommonHeader));
export default withTransaltion()(Component)

Or you can use compose from Redux as

import { compose } from 'redux'

const Component = 
withRouter(connect(mapStateToProps,mapDispatchToProps(CommonHeader));
export default compose(
 withTransaltion,
 withRouter,
 )(Component)

Hope it helps