I have an array of string that specifies the order in which my components are rendered. 

```
const requiredOrder = [ "Line1Component", "Line3Component", "Line2Component" ];

```

I also have components with names that match the string in my above array.

**I want to render the components based on the order mentioned in my requiredOrder array.**

When I try to run the below code, I get:

```
Objects are not valid as a React child (found: object with keys {OrderredComponents}). If you meant to render a collection of children, use an array instead.

Minified: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

```

I tried to wrap the return statement in a wrapper, but still not able to figure out what's wrong.

I want to avoid case statements as mentioned here [here](https://stackoverflow.com/questions/48195446/rendering-react-components-in-a-specified-order) as my requiredOrder list may grow very big.

```js
class OrderMyComponents extends React.Component {
  render() {
    const requiredOrder = [
      "Line1Component",
      "Line2Component",
      "Line3Component"
    ];

    const Line1Component = () => (
      <div>
        <b>Line 1</b>
      </div>
    );
    const Line2Component = () => (
      <div>
        <b>Line 2</b>
      </div>
    );
    const Line3Component = () => (
      <div>
        <b>Line 3</b>
      </div>
    );

    const OrderredComponents = requiredOrder.map(function(item) {
      return { item };
    });

    return <OrderredComponents />;
  }
}

ReactDOM.render(
  <OrderMyComponents />,
  document.getElementById("react")
);
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>
```