title: React - Render children in matching sort order?
body: <p>Given a component that renders its children, I can't get the children to render sorted as per their <code>newOrder</code> order:</p>
  <pre><code>export default class EnhancedLinks extends React.Component {
    render() {
      return (
        &lt;div&gt;
          {React.Children.map(
            this.props.children.filter((c) =&gt; c),
            (el) =&gt; el
          )}
        &lt;/div&gt;
      );
    }
  }
  
  export default class App extends React.Component {
    render() {
      const newOrder = [&quot;dandelion&quot;, &quot;cantaloupe&quot;, &quot;apple&quot;, &quot;banana&quot;];
  
      return (
        &lt;div&gt;
          &lt;EnhancedLinks&gt;
            &lt;div name=&quot;apple&quot; color=&quot;red&quot;&gt;apple&lt;/div&gt;
            &lt;div name=&quot;banana&quot; color=&quot;yellow&quot;&gt;banana&lt;/div&gt;
            &lt;div name=&quot;cantaloupe&quot; color=&quot;orange&quot;&gt;cantaloupe&lt;/div&gt;
            &lt;div name=&quot;dandelion&quot; color=&quot;green&quot;&gt;dandelion&lt;/div&gt;
          &lt;/EnhancedLinks&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>Any idea how to get the <code>EnhancedLinks</code> children to render as per the order of the <code>newOrder</code> array?</p>
  <p>Here's a fiddle:
  <a href="https://codesandbox.io/s/react-and-scss-forked-z1p0b?file=/src/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/react-and-scss-forked-z1p0b?file=/src/index.js</a></p>