title: Flow: How to type a HOC that accepts a prop the wrapped component doesn't care about
body: <p>I'm not quite sure how to type the following HOC in Flow 0.57.3:</p>
  
  <pre class="lang-js prettyprint-override"><code>// @flow
  import React, {Component, type ComponentType} from 'react';
  
  type OwnProps = {
      onFoo: void =&gt; void
  };
  
  // What we want from the returned wrapper component:
  // - enforces presence of `onFoo` prop
  // - enforces the prop contract of the passed-in WrappedComponent
  function WithOnFoo&lt;Props: {}&gt;(
      WrappedComponent: ComponentType&lt;Props&gt;
  ): ComponentType&lt;Props &amp; OwnProps&gt; {
      return class WithOnFoo extends Component&lt;Props &amp; OwnProps&gt; {
          componentDidMount() {
              this.props.onFoo();
          }
  
          render() {
              return &lt;WrappedComponent {...this.props} /&gt;;
          }
      };
  }
  
  const MyComponent = ({name}: {name: string}) =&gt; (
      &lt;p&gt;Hi, {name}&lt;/p&gt;
  );
  
  const wrapped = WithOnFoo(MyComponent);
  </code></pre>
  
  <p>Try it out <a href="https://flow.org/try/#0PTAEAEDMBsHsHcBQBLAtgB1gJwC6gEoCmAhgMY4A0oA3gMKwawB2hTloOAnuoaPYyzYAVboQC+oSFgagA5FhLlZAbkSIuPUAHl4TAArT0AZ1ABeGolBXQzAGKxYALlAA3WMgAmZgHyv3HxDFVRBBQAHUAC2I8eF54YjZJaVQOCN4FHABXLBYveCxidB4sUFIGTEEcRxCwAFpQVkhsUkITdAUjVhabSFAAAzsHPtB22HQa0HrG5tbU3lH0UuYcAvIeuZHiI06PWuQmcIKiwg9+CtYcREhMpnJkZnDkHAitJntYAB4DMaNnajFvAAKSzWMJHHincrMC7OM7Q4SiL6GIzeRAASlhUMqIh4SJ+oAAZNpdN9jL5qCCrBlsgdSNAtiYwk8Xm8HA0AB44VgeExwyp44yE4n6ZHkxAASHFZQEFwAIp4ALKwG44QFoixWSXi57IIwAOgW+sGsDVqklYjU1itoAUTA8hCwao11pd1JyoA+YMKEL5FxoeoDOv1hokwG8qhdVgtVqCgTUZSYRjwCs4vsS5kB1CYxFQ4j+2dzziTWH2AHMxOrTL5geKPuhvAAJZBULM58QfYD19HBBNJ0D5b0nMyPZ6vd6AlNpnBoiOgIA" rel="nofollow noreferrer">here</a>.</p>
  
  <p>The comment explains what I'm looking for: a returned wrapper component that</p>
  
  <ul>
  <li>enforces presence of <code>onFoo</code> prop</li>
  <li>enforces the prop contract of the passed-in WrappedComponent</li>
  </ul>
  
  <p>Flow complains that:</p>
  
  <pre><code>20:             return &lt;WrappedComponent {...this.props} /&gt;;
                         ^ props of React element `WrappedComponent`. This type is incompatible with
  11: function WithOnFoo&lt;Props: {}&gt;(    ^ some incompatible instantiation of `Props`
  </code></pre>
  
  <p>I'm not quite sure what this error is complaining about. I know I'm not taking pains <em>not</em> to pass the HOC's <code>onFoo</code> prop down to the WrappedComponent, but I'm not sure that's the source of the problem.</p>
  
  <p>Any ideas?</p>