title: Typescript + React, rendering an array from a stateless functional component
body: <p>The React team <a href="https://reactjs.org/blog/2017/09/26/react-v16.0.html" rel="noreferrer">announced</a> that since React 16:</p>
  
  <blockquote>
    <p>You can now return an array of elements from a component’s render method.</p>
  </blockquote>
  
  <p>This works in typescript for regular class components, but I cannot get it to work for stateless functional components.</p>
  
  <p>See <a href="https://github.com/edorivai/ts-sfc-array" rel="noreferrer">this repo</a> if you want to reproduce for yourself.</p>
  
  <p>Code:</p>
  
  <pre><code>import * as React from 'react';
  
  // See this example working in a non-TS environment: https://codesandbox.io/s/ppl3wopo8j
  class Hello extends React.Component {
      render() {
          return &lt;div&gt;
          &lt;Foo /&gt;
          &lt;Bar /&gt; {/* Error: 'JSX element type 'Element[]' is not a constructor function for JSX elements. */}
        &lt;/div&gt;;
      }
  }
  
  class Foo extends React.Component {
      render() {
          return [&lt;div&gt;foo&lt;/div&gt;, &lt;div&gt;fooz&lt;/div&gt;];
      }
  }
  
  function Bar() {
      // Cannot render an array from a SFC
      return [&lt;div&gt;bar&lt;/div&gt;, &lt;div&gt;baz&lt;/div&gt;];
  }
  </code></pre>
  
  <p>Building this snipper results in the following error:</p>
  
  <pre><code>'JSX element type 'Element[]' is not a constructor function for JSX elements.
    Property 'render' is missing in type 'Element[]'.'
  </code></pre>
  
  <p>As you can see, rendering an array from a regular class component works, but it fails when rendering an array from a stateless functional component.</p>
  
  <p>I'm unsure whether the problem lies with my code/setup, the DefinitelyTyped react types, or with typescript itself.</p>