title: Spread an array of components in render in React
body: <p>I currently render an array of component as child of another component like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>const myComponents = [
    &lt;div key='1'&gt;Component 1&lt;/div&gt;,
    &lt;div key='2'&gt;Component 2&lt;/div&gt;,
    &lt;div key='3'&gt;Component 3&lt;/div&gt;,
  ];
  
  render() {
    return (
      &lt;AnotherComponent&gt;
        {myComponents}
        &lt;div&gt;Another element&lt;/div&gt;
      &lt;/ AnotherComponent&gt;
    )
  }
  </code></pre>
  
  <p>My issue is that inside <code>AnotherComponent</code>, my array of components is rendered as an array (which makes sense):</p>
  
  <pre class="lang-js prettyprint-override"><code>// Inside AnotherComponent
  console.log(this.props.children) // [[ {}, {}, {} ], {} ]
  </code></pre>
  
  <p>My expected output is that components should be "spread", like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>// Inside AnotherComponent
  console.log(this.props.children) // [ {}, {}, {}, {} ]
  </code></pre>
  
  <p>I have tried to <code>map</code> the components in the render but the output is the same:</p>
  
  <pre class="lang-js prettyprint-override"><code>const myComponents = [
    ...
  ];
  
  render() {
    return (
      &lt;AnotherComponent&gt;
        {myComponents.map(component =&gt; component)}
        &lt;div&gt;Another element&lt;/div&gt;
      &lt;/ AnotherComponent&gt;
    )
  }
  </code></pre>
  
  <p>I can achieve that with flattening my array of children inside <code>AnotherComponent</code>. But I was wondering if there was a syntax that would allow me to flatten it before, so that <code>AnotherComponent</code> is cleaner.</p>
  
  <p>Reason I want to achieve this is because I do some complex layout rendering inside <code>AnotherComponent</code>. This requires the children not to be arrays, unless I explicitly want it, which is not the case here.</p>
  
  <p>Edit: Here is a demo with my current output and my expected output:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const components = [
    &lt;div&gt;Component 1&lt;/div&gt;,
    &lt;div&gt;Component 2&lt;/div&gt;,
    &lt;div&gt;Component 3&lt;/div&gt;,
  ];
  
  const MyLayoutComponent = ({ children }) =&gt; {
    console.log('❌ Current output', children);
    console.log('✅ Expected output', children.flat());
    return &lt;div&gt;{children}&lt;/div&gt;
  }
  
  const App = () =&gt; (
    &lt;MyLayoutComponent&gt;
      {components}
      &lt;div&gt;Some other component&lt;/div&gt;
    &lt;/MyLayoutComponent&gt;
  );
  
  ReactDOM.render(&lt;App /&gt;, document.body)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>