<p dir="auto">in "@types/react": "^16.8.2"</p>
<p dir="auto">this works:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export class Test extends React.PureComponent&lt;void, void&gt; {
	render() { 
		return this.props.children;
	}
}"><pre class="notranslate"><code class="notranslate">export class Test extends React.PureComponent&lt;void, void&gt; {
	render() { 
		return this.props.children;
	}
}
</code></pre></div>
<p dir="auto">but this doesn't work:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export const Test:React.FC&lt;void&gt; = p =&gt; {
	return p.children;
};"><pre class="notranslate"><code class="notranslate">export const Test:React.FC&lt;void&gt; = p =&gt; {
	return p.children;
};
</code></pre></div>
<p dir="auto">seems like the functional component should allow bare return of children just as the class component does. Perhaps a mismatch between the <code class="notranslate">ReactNode</code> and <code class="notranslate">ReactElement</code> types?</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/xxxx</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/gaspard/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/gaspard">@gaspard</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vbfox/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vbfox">@vbfox</a></li>
</ul>
</li>
</ul>
<p dir="auto">As mentioned in <a href="https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-with-logical--operator" rel="nofollow">React documentation</a>, a stateless component can return <code class="notranslate">false</code> for empty content. Currently <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L312-L313">StatelessComponent</a> is defined as:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="interface StatelessComponent&lt;P = {}&gt; {
        (props: P &amp; { children?: ReactNode }, context?: any): ReactElement&lt;any&gt; | null;"><pre class="notranslate"><span class="pl-k">interface</span> <span class="pl-smi">StatelessComponent</span><span class="pl-c1">&lt;</span><span class="pl-smi">P</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-kos">(</span><span class="pl-s1">props</span>: <span class="pl-smi">P</span> <span class="pl-c1">&amp;</span> <span class="pl-kos">{</span> <span class="pl-c1">children</span>?: <span class="pl-smi">ReactNode</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">context</span>?: <span class="pl-smi">any</span><span class="pl-kos">)</span>: <span class="pl-smi">ReactElement</span><span class="pl-kos">&lt;</span><span class="pl-smi">any</span><span class="pl-kos">&gt;</span> <span class="pl-c1">|</span> <span class="pl-c1">null</span><span class="pl-kos">;</span><span class="pl-kos"></span></pre></div>
<p dir="auto">whereas <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L270-L280">Component</a> has</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Component&lt;P, S&gt; {
        constructor(props?: P, context?: any);
        // ...snip...
        render(): JSX.Element | null | false;"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-smi">Component</span><span class="pl-c1">&lt;</span><span class="pl-smi">P</span><span class="pl-kos">,</span> <span class="pl-smi">S</span><span class="pl-c1">&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-c1">constructor</span><span class="pl-kos">(</span><span class="pl-s1">props</span>?: <span class="pl-smi">P</span><span class="pl-kos">,</span> <span class="pl-s1">context</span>?: <span class="pl-smi">any</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-c">// ...snip...</span>
        <span class="pl-c1">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-smi">JSX</span><span class="pl-kos">.</span><span class="pl-smi">Element</span> <span class="pl-c1">|</span> <span class="pl-c1">null</span> <span class="pl-c1">|</span> <span class="pl-c1">false</span><span class="pl-kos">;</span><span class="pl-kos"></span></pre></div>
<p dir="auto">Shouldn't these types be the same (including eliminating the ReactElement vs JSX.Element difference)? And to avoid future such issues (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="201343233" data-permission-text="Title is private" data-url="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/14064" data-hovercard-type="issue" data-hovercard-url="/DefinitelyTyped/DefinitelyTyped/issues/14064/hovercard" href="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/14064">#14064</a>, this one) it should probably be a named type, e.g. RenderResult.</p>
<p dir="auto">A search for <code class="notranslate">| null</code> also comes up with <code class="notranslate">ComponentSpec.render</code> which probably should also have the same result type.</p>