title: TypeScript and React: Pass component in props and return it from a function
body: <p>I'm writing a Form component with React and TypeScript. I use Formik for the form logic. I want to pass the <code>&lt;Form /&gt;</code> component a specific form as a prop and render it. Here is what I tried:</p>
  
  <pre><code>import { Formik, FormikProps } from "formik";
  import React, { PureComponent, ReactNode } from "react";
  
  export interface Props {
    component: ReactNode; // TODO: Change to one of LoginForm or RegisterForm.
    handleSubmit(): void;
  }
  
  export class Form extends PureComponent&lt;Props&gt; {
    renderForm = (formikProps: FormikProps&lt;any&gt;): ReactNode =&gt; {
      const { component: FormComponent } = this.props;
      return &lt;FormComponent {...formikProps} /&gt;;
    };
  
    render() {
      const { handleSubmit } = this.props;
      return &lt;Formik render={this.renderForm} /&gt;;
    }
  }
  
  export default Form;
  </code></pre>
  
  <p>The problem is that the line where I return the <code>&lt;FormComponent /&gt;</code> throws the error:</p>
  
  <pre><code>[ts] JSX element type 'FormComponent' does not have any construct or call signatures.
  </code></pre>
  
  <p><code>renderForm</code> has to return a ReactNode, so I can't change <code>ReactNode</code> to <code>ComponentType</code> (the latter would resolve the JSX error).</p>
  
  <p>How would one do this in TypeScript?</p>
  
  <p><strong>Edit</strong>
  So I got it working by doing this (thanks to <a href="https://stackoverflow.com/users/3731501/estus">estus</a>):</p>
  
  <pre><code>import { Formik, FormikProps } from "formik";
  import React, { PureComponent, ReactElement } from "react";
  
  export interface Props {
    component: React.ComponentType&lt;any&gt;; // TODO: Change to one of LoginForm or RegisterForm.
    handleSubmit(): void;
  }
  
  export class Form extends PureComponent&lt;Props&gt; {
    renderForm = (formikProps: FormikProps&lt;any&gt;): ReactElement&lt;any&gt; =&gt; {
      const { component: FormComponent } = this.props;
      return &lt;FormComponent {...formikProps} /&gt;;
    };
  
    render() {
      const { handleSubmit } = this.props;
      return &lt;Formik render={this.renderForm} /&gt;;
    }
  }
  
  export default Form;
  </code></pre>