title: Typing React components in Flow when passing a component as a prop
body: <p>I want to pass a React component as input prop to another React component. I tried to reference it as React.Component&lt;*, *, *> but when I use the passed component in the render method I get an error. This is how I wrote out my flow code.</p>
  
  <pre><code>/* @flow */
  
  import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  
  const Input = props =&gt; &lt;div&gt;Yo&lt;/div&gt;
  
  type DefaultProps = {
    InputComponent: Input
  };
  
  type Props = {
    InputComponent: React.Component&lt;*, *, *&gt;
  };
  
  class App extends Component&lt;DefaultProps, Props, void&gt; {
    static defaultProps = {
      InputComponent: Input
    };
  
    props: Props;
  
    render() {
      const { InputComponent } = this.props
  
      return (
        &lt;div&gt;
          &lt;InputComponent /&gt;
        &lt;/div&gt;
      )
    }
  }
  
  ReactDOM.render(
    &lt;App /&gt;,
    document.getElementById('root')
  )
  </code></pre>
  
  <p>However in the App render method I get the error</p>
  
  <pre><code>React element `InputComponent` (Expected React component instead of React$Component)
  </code></pre>
  
  <p>How should I properly type input components?</p>