Using for loops and switch cases in React to dynamically render different components
<p>I am trying to render components conditionally using switch case in React JSX. I am trying to build something that reads from a specific json structure and renders the data. Since there can be many different components and data, I am trying to render it dynamically. See my code below, I am not getting any errors but the components aren't getting rendered. Inside my html , I can only see  . This means the loop isn't working. I tried using the same loop in vanilla JS and it works. </p>

<pre><code>var myPackage = [{
    sectionInfo:[{
        elementType: 1,
        text: "This is text from element type 1"
    }]
},
{
    sectionInfo:[{
        elementType: 2,
        text: "This is text from element type 2"
    }]
}];
var App = React.createClass({

    render: function(){
        var elements = [];
        elements = myPackage.map(function(myObj){
            myObj.sectionInfo.map(function(myObj1){
                switch(myObj1.elementType){
                    case 1: return(
                                &lt;Component1 text = {myObj1.text}/&gt;
                            );
                            break;
                    case 2: return(
                                &lt;Component2 text = {myObj1.text}/&gt;
                            )
                            break;      
                }
            })
        });
        return(
            &lt;div className="App"&gt;
                {elements}
            &lt;/div&gt;
        )
    }
});
var Component1 = React.createClass({
    render:function(){
        return(
            &lt;div className = "element1"&gt;
                {this.props.text}
            &lt;/div&gt;
        )
    }
});
var Component2 = React.createClass({
    render:function(){
        return(
            &lt;div className = "element2"&gt;
                {this.props.text}
            &lt;/div&gt;
        )
    }
});
ReactDOM.render(&lt;App/&gt;,document.getElementById('container'));
</code></pre>

<p>Edit: Made a few additions to the code, and now I am facing a new problem. Here is the new code: </p>

<pre><code>var App = React.createClass({

        render: function(){
            var elements = [];
            elements = myPackage.map(function(myObj){
                return(
                       &lt;div&gt;
                           myObj.sectionInfo.map(function(myObj1){
                           switch(myObj1.elementType){
                           case 1: return(
                                    &lt;Component1 text = {myObj1.text}/&gt;
                                );
                                break;
                           case 2: return(
                                    &lt;Component2 text = {myObj1.text}/&gt;
                                )
                                break;      
                        }
                        }
                  &lt;/div&gt;
                )
                });
        return(
            &lt;div className="App"&gt;
                {elements}
            &lt;/div&gt;
        )
    }
});
</code></pre>

<p>I want to render each time inside a div. So that if one section has more than 3 elements, then all 3 must be inside a div.</p>