<p dir="auto">Let's say we have a component <code class="notranslate">Foo</code> which expects to get a single child:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" class Foo extends React.Component {
    render () {
      const {children} = this.props;
      return React.Children.only (children);
    }
}"><pre class="notranslate"> <span class="pl-k">class</span> <span class="pl-v">Foo</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>
    <span class="pl-en">render</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-kos">{</span>children<span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">;</span>
      <span class="pl-k">return</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Children</span><span class="pl-kos">.</span><span class="pl-en">only</span> <span class="pl-kos">(</span><span class="pl-s1">children</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">This works as expected if I render <code class="notranslate">&lt;Foo&gt;&lt;div/&gt;&lt;/Foo&gt;</code> since <code class="notranslate">children</code> then maps to a single child, and <code class="notranslate">React.Children.only()</code> will happily return the only child.</p>
<p dir="auto">However, when using <code class="notranslate">Foo</code> like this, it throws:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Bar extends React.Component {
  render () {
    const keys = ['a'];
    return &lt;Foo&gt;{keys.map (k =&gt; &lt;div key={k}/&gt;)}&lt;/Foo&gt;;
  }
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">Bar</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>
  <span class="pl-en">render</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">keys</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-s">'a'</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">Foo</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">keys</span><span class="pl-kos">.</span><span class="pl-en">map</span> <span class="pl-kos">(</span><span class="pl-s1">k</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">k</span><span class="pl-kos">}</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Foo</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Now, <code class="notranslate">Foo</code> gets an array with one <code class="notranslate">&lt;div&gt;</code> element.</p>
<p dir="auto">I was expecting <code class="notranslate">React.Children.only()</code> to also handle this case and return the only child in the array. But obviously, it does not.</p>
<p dir="auto">Now, I have to write this instead:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" class Foo extends React.Component {
    render () {
      const {children} = this.props;
      return (Array.isArray (children)) ? children[0] : React.Children.only (children);
    }
}"><pre class="notranslate"> <span class="pl-k">class</span> <span class="pl-v">Foo</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>
    <span class="pl-en">render</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-kos">{</span>children<span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">;</span>
      <span class="pl-k">return</span> <span class="pl-kos">(</span><span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-en">isArray</span> <span class="pl-kos">(</span><span class="pl-s1">children</span><span class="pl-kos">)</span><span class="pl-kos">)</span> ? <span class="pl-s1">children</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span> : <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Children</span><span class="pl-kos">.</span><span class="pl-en">only</span> <span class="pl-kos">(</span><span class="pl-s1">children</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">Is this by design? Did I miss something here?</p>
<p dir="auto"><code class="notranslate">Children.only</code> is intended to be called on an opaque <code class="notranslate">Children</code> object (eg. <code class="notranslate">this.props.children</code>).  Best as I can tell, <code class="notranslate">Children.map</code> is intended to return an opaque <code class="notranslate">Children</code> object.  But <code class="notranslate">Children.only</code> can't be called on the return value of <code class="notranslate">Children.map</code>, as per <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="95567371" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/4410" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/4410/hovercard?comment_id=122199087&amp;comment_type=issue_comment" href="https://github.com/facebook/react/issues/4410#issuecomment-122199087">#4410 (comment)</a></p>
<p dir="auto">It seems very reasonable to want to map your only child to another element (clone element, for instance), and then grab the only child from the map and use it to render.  It is also very surprising for the identity operation to be passed into map, but the thing that comes out to not be semantically equivalent.</p>
<p dir="auto">Issue demonstrated here: <a href="https://jsfiddle.net/9Ldyq5jk/4/" rel="nofollow">https://jsfiddle.net/9Ldyq5jk/4/</a></p>