title: Render different react-components depending on property-value
body: <p>I'm trying to build an input-component in <code>ReactJs</code> using typescript.
  An input can have different types, e.g. <code>text</code>, <code>date</code>, <code>select</code> or <code>textarea</code>.</p>
  
  <p>Depending on the given type the rendered control can be different. If set to <code>text</code>, <code>&lt;input type="text" /&gt;</code> should be returned.
  On the other hand, if the type is <code>select</code>, <code>&lt;select&gt;&lt;/select&gt;</code> should be returned.</p>
  
  <p>These are my props:</p>
  
  <pre><code>export interface IInputProps {
      type?: "text" | "checkbox" | "date" | "select"| "textarea";
  }
  </code></pre>
  
  <p>In my <code>render</code>-function I now try to figure out, what should be returned:</p>
  
  <pre><code>render(): JSX.Element {
      const { type } = this.props;
  
      let Element: JSX.Element = null;
  
      switch (type) {
          case "text":
              Element = &lt;input type={type} /&gt;;
              break;
          case "select":
              const { children } = this.props.selectProps;
              Element = &lt;select&gt;{children}&lt;/select&gt;;
              break;
          default:
              throw new Error(`The type ${type} is currently not implemented. If needed, do so.`);
      }
  
      const classes = classNames("form-control");
  
      // return the markup of the final element
      return (
          &lt;React.Fragment&gt;
              { /* below the error is thrown */ }
              &lt;Element ref={/* some internal handling here */} className={classes} /&gt; 
          &lt;/React.Fragment&gt;
      );
  }
  </code></pre>
  
  <p>However, this code throws</p>
  
  <blockquote>
    <p>Error TS2604  (TS) JSX element type 'Element' does not have any construct or call signatures.</p>
  </blockquote>
  
  <p>Note that the example is a simplified version of the problem. There will be more type-specific properties, e.g. attributes <code>rows</code> and <code>cols</code> for <code>textarea</code>.</p>
  
  <p>What would be the correct way to achieve this? What type must <code>Element</code> be? Also note, that I have to set attributes, which may not be available, e.g. <code>type</code> is not available on <code>&lt;select&gt;</code>.</p>