title: How to wrap an HOC component twice
body: <p>I have a class component in a reactjs app, that I want it to use router and translation.</p>
  
  <pre><code>interface CommonHeaderProps extends RouteComponentProps&lt;any&gt; {
  }
  
  class CommonHeader extends React.Component&lt;CommonHeaderProps&gt; {  
  
    render() {
  
  
      return (
        &lt;div&gt;
  
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = (state: RootState) =&gt; ({
  
  })
  
  const mapDispatchToProps = {};
  
  export default withRouter(connect(
      mapStateToProps,
      mapDispatchToProps
  )(CommonHeader));
  </code></pre>
  
  <p>I would like this component to have be </p>
  
  <p><code>withRouter()(CommonHeader)</code>
  and 
  <code>withTranslation()(CommonHeader)</code></p>
  
  <p>but doing this do not work </p>
  
  <pre><code>export default withTranslation()(withRouter(connect(
      mapStateToProps,
      mapDispatchToProps
  )(CommonHeader)));
  </code></pre>
  
  <p>I tried </p>
  
  <pre><code>const Component = connect(
    mapStateToProps,
    mapDispatchToProps
  )(CommonHeader)
  
  export default compose&lt;CommonHeader&gt;(
   withTranslation,
   withRouter,
  )(Component)
  </code></pre>
  
  <p>But then I get the following error when I try to call the component :</p>
  
  <blockquote>
    <p>JSX element type 'CommonHeader' does not have any construct or call
    signatures</p>
  </blockquote>