title: Using for loops and switch cases in React to dynamically render different components
body: <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>