<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>, ...</li>
</ul>
</li>
</ul>
<p dir="auto">With current typings it is not possible to create a stateless component which returns a string, number, boolean... (new in React 16)</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react'

const TestString = () =&gt; {
    return 'Test String Component'
}

const Component = () =&gt; (
    &lt;div&gt;
        &lt;TestString/&gt;
    &lt;/div&gt;
)"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>

<span class="pl-k">const</span> <span class="pl-smi">TestString</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-k">return</span> <span class="pl-s">'Test String Component'</span>
<span class="pl-kos">}</span>

<span class="pl-k">const</span> <span class="pl-smi">Component</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">&lt;</span><span class="pl-smi">div</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-smi">TestString</span><span class="pl-c1">/</span><span class="pl-kos">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">div</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span></pre></div>
<p dir="auto">Error I get:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="JSX element type 'string' is not a constructor function for JSX elements."><pre class="notranslate"><code class="notranslate">JSX element type 'string' is not a constructor function for JSX elements.
</code></pre></div>
<p dir="auto">The first problem is that currently in the typings a stateless component cannot return anything else besides an instance of a <code class="notranslate">React.Element</code>. This should be changed to (I think, I've based it upon the changes on the <code class="notranslate">render</code>method, see <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L422">https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L422</a>)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="interface StatelessComponent&lt;P = {}&gt; {
        (props: P &amp; { children?: ReactNode }, context?: any): ReactElement&lt;any&gt; | Array&lt;ReactElement&lt;any&gt;&gt; | string | number | null;
        propTypes?: ValidationMap&lt;P&gt;;
        contextTypes?: ValidationMap&lt;any&gt;;
        defaultProps?: Partial&lt;P&gt;;
        displayName?: string;
}"><pre class="notranslate"><code class="notranslate">interface StatelessComponent&lt;P = {}&gt; {
        (props: P &amp; { children?: ReactNode }, context?: any): ReactElement&lt;any&gt; | Array&lt;ReactElement&lt;any&gt;&gt; | string | number | null;
        propTypes?: ValidationMap&lt;P&gt;;
        contextTypes?: ValidationMap&lt;any&gt;;
        defaultProps?: Partial&lt;P&gt;;
        displayName?: string;
}
</code></pre></div>
<p dir="auto">Second problem is that behind the scenes the compiler will convert the jsx to `React.createElement('Test String Component', null)``</p>
<p dir="auto">I get a compiler error that is saying that this is not a valid value. Seems that it has to be one of the values specified in following list: <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L3465">https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L3465</a>.</p>
<p dir="auto">Any thoughts on how this can be fixed?</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>