<p dir="auto">If you know how to fix the issue, make a pull request instead.</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the <code class="notranslate">@types/react</code> (version 16.9.19) package and had problems.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the latest stable version of tsc (version 3.7.5). <a href="https://www.npmjs.com/package/typescript" rel="nofollow">https://www.npmjs.com/package/typescript</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have a question that is inappropriate for <a href="https://stackoverflow.com/" rel="nofollow">StackOverflow</a>.  (Please ask any appropriate questions there).</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <a href="https://github.com/blog/821-mention-somebody-they-re-notified">Mention</a> the authors (see <code class="notranslate">Definitions by:</code> in <code class="notranslate">index.d.ts</code>) so they can respond.
<ul dir="auto">
<li>Authors: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/johnnyreilly/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/johnnyreilly">@johnnyreilly</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bbenezech/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bbenezech">@bbenezech</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/pzavolinsky/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/pzavolinsky">@pzavolinsky</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/digiguru/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/digiguru">@digiguru</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/ericanderson/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ericanderson">@ericanderson</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/DovydasNavickas/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/DovydasNavickas">@DovydasNavickas</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/theruther4d/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/theruther4d">@theruther4d</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/guilhermehubner/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/guilhermehubner">@guilhermehubner</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/ferdaber/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ferdaber">@ferdaber</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jrakotoharisoa/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jrakotoharisoa">@jrakotoharisoa</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/pascaloliv/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/pascaloliv">@pascaloliv</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Hotell/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Hotell">@Hotell</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/franklixuefei/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/franklixuefei">@franklixuefei</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Jessidhia/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Jessidhia">@Jessidhia</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/saranshkataria/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/saranshkataria">@saranshkataria</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/lukyth/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/lukyth">@lukyth</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/eps1lon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/eps1lon">@eps1lon</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/zieka/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/zieka">@zieka</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/dancerphil/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/dancerphil">@dancerphil</a></li>
</ul>
</li>
</ul>
<hr>
<p dir="auto">Simple example code:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const ExampleComponent: FC&lt;{}&gt; = () =&gt; {
  // some data example
  const data = [{ name: '123' }, { name: '321' }];

  // return React Elements array
  return data.map(t =&gt; &lt;div key={t.name}&gt;{t.name}&lt;/div&gt;);
};"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">ExampleComponent</span>: <span class="pl-c1">FC</span><span class="pl-c1">&lt;</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-c">// some data example</span>
  <span class="pl-k">const</span> <span class="pl-s1">data</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'123'</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'321'</span> <span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

  <span class="pl-c">// return React Elements array</span>
  <span class="pl-k">return</span> <span class="pl-s1">data</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-s1">t</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">key</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">t</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">t</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Throws an error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="TS2322: Type '() =&gt; JSX.Element[]' is not assignable to type 'FC&lt;{}&gt;'.   Type 'Element[]' is not assignable to type 'ReactElement&lt;any, string | ((props: any) =&gt; ReactElement&lt;any, string | ... | (new (props: any) =&gt; Component&lt;any, any, any&gt;)&gt; | null) | (new (props: any) =&gt; Component&lt;any, any, any&gt;)&gt;'."><pre class="notranslate"><code class="notranslate">TS2322: Type '() =&gt; JSX.Element[]' is not assignable to type 'FC&lt;{}&gt;'.   Type 'Element[]' is not assignable to type 'ReactElement&lt;any, string | ((props: any) =&gt; ReactElement&lt;any, string | ... | (new (props: any) =&gt; Component&lt;any, any, any&gt;)&gt; | null) | (new (props: any) =&gt; Component&lt;any, any, any&gt;)&gt;'.
</code></pre></div>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the <code class="notranslate">@types/react</code> package and had problems.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the latest stable version of tsc. <a href="https://www.npmjs.com/package/typescript" rel="nofollow">https://www.npmjs.com/package/typescript</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have a question that is inappropriate for <a href="https://stackoverflow.com/" rel="nofollow">StackOverflow</a>.  (Please ask any appropriate questions there).</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <a href="https://github.com/blog/821-mention-somebody-they-re-notified">Mention</a> the authors (see <code class="notranslate">Definitions by:</code> in <code class="notranslate">index.d.ts</code>) so they can respond.
<ul dir="auto">
<li>Authors: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/johnnyreilly/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/johnnyreilly">@johnnyreilly</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bbenezech/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bbenezech">@bbenezech</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/pzavolinsky/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/pzavolinsky">@pzavolinsky</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/digiguru/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/digiguru">@digiguru</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/ericanderson/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ericanderson">@ericanderson</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/morcerf/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/morcerf">@morcerf</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tkrotoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tkrotoff">@tkrotoff</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/DovydasNavickas/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/DovydasNavickas">@DovydasNavickas</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/onigoetz/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/onigoetz">@onigoetz</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/richseviora/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/richseviora">@richseviora</a></li>
</ul>
</li>
</ul>
<p dir="auto">React 16 components can have multiple root elements.</p>
<p dir="auto"><code class="notranslate">const Items = ({ items }: MyProps) =&gt; items.map(item =&gt; &lt;div key={item.id}&gt;{item.name}&lt;/div&gt;)</code></p>
<p dir="auto">However, TypeScript will break with:<br>
<code class="notranslate">error TS2605: JSX element type 'Element[]' is not a constructor function for JSX elements. Property 'render' is missing in type 'Element[]'.</code></p>