title: How to correctly Type a React Component that is a param of a Function?
body: <p>I have a function, which takes two params: a react component, and a string. I am trying to give them correct typings, however, am confused as to why the following wont work...</p>
  
  <p><strong>The problem is with the typing with GivenComponent in the Function.</strong> By giving the param that specific typing of Component&lt;>, the return of the GivenComponent (within the &lt; Query />) errors stating the following:</p>
  
  <p><em>JSX element type 'GivenComponent' does not have any construct or call signatures. [2604]</em></p>
  
  <p>However, how would you type that correctly? That param is a React Component, could be both a functional or a class component. As seen in the second part of code, the param isn't given as &lt; MyComponent />, it is given as MyComponent - so not the "rendered" jsx? maybe that changes things</p>
  
  <h1>Function:</h1>
  
  <p><strong>Basically takes a component and returns it with a higher order component wrapper around it</strong></p>
  
  <pre><code>import React, { Component } from "react";
  
  const withQueryData: Function = (
    GivenComponent: Component&lt;{ data: {} }, any&gt;,
    query: string
  ) =&gt; () =&gt; (
  
    &lt;Query query={gql(query)}&gt;
      {({ loading, error, data }) =&gt; {
        if (loading) return &lt;p&gt;Loading...&lt;/p&gt;;
        if (error) return &lt;p&gt;Error! {error.message}&lt;/p&gt;;
  
        return &lt;GivenComponent data={data} /&gt;;
      }}
    &lt;/Query&gt;
  );
  
  export default withQueryData;
  </code></pre>
  
  <h1>React Component:</h1>
  
  <p><strong>example of how the function above is called with params</strong></p>
  
  <pre><code>class MyComponent extends Component&lt;...removed...&gt; {
  
    render() {
      return (
        &lt;div&gt;...&lt;/div&gt;
      );
    }
  }
  
  
  
  const MyComponentQuery = `query goes here...`;
  
  const MyComponentWithData = withQueryData(
    MyComponent,
    MyComponentQuery
  );
  
  export default MyComponentWithData;
  </code></pre>