title: Dynamically rendering react components from string array
body: <p>Running into an issue rendering components dynamically as the come off the CMS in the react code.  </p>
  
  <p>Having no problem getting &amp; parsing the variable names into an array to be utilized in the actual rendering - but receiving errors here no matter the method I'm using: </p>
  
  <ul>
  <li>Warning:  is using uppercase HTML. Always use lowercase
  HTML tags in React. </li>
  <li>Warning:  is using uppercase HTML. Always use lowercase HTML tags in React.</li>
  </ul>
  
  <p>Which clearly shows I'm using caps :) </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {
    Component
  } from 'react';
  import {
    createClient
  } from 'contentful';
  import CtaBlock from './CTABlock';
  import DeviceList from './DeviceList';
  
  class HomeContainer extends Component {
    constructor(props) {
      super(props);
      this.state = {
        pageCont: [],
        entries: []
      };
    }
  
    componentDidMount() {
      const client = createClient({
        // This is the space ID. A space is like a project folder in Contentful terms
        space: '...',
        // This is the access token for this space. Normally you get both ID and the token in the Contentful web app
        accessToken: '...'
      });
  
      client.getEntries({
        'sys.id': '5stYSyaM8gkiq0iOmsOyKQ'
      }).then(response =&gt; {
        this.setState({
          mainCont: response
        });
      });
    }
  
    getEntries = pageCont =&gt; {
      var linkedEntries = pageCont.includes.Entry;
      console.log(linkedEntries);
  
      return linkedEntries;
    };
  
    render() {
      var formattedComponents = [];
      var renderedComponents = [];
  
      if (this.state.mainCont) {
        //getting the type of component from the Contetful API (String)
        var componentList = this.getEntries(this.state.mainCont).map(entries =&gt; entries.sys.contentType.sys.id);
  
        //converting the component names to upper case 
        formattedComponents = componentList.map(comps =&gt; comps.charAt(0).toUpperCase() + comps.slice(1));
  
        renderedComponents = formattedComponents.map(MyComponent =&gt; {
          return &lt;MyComponent / &gt;
        });
      }
  
      return ( 
        &lt;div&gt;
          &lt;h1&gt; Dynamically Generated Components Div &lt;/h1&gt; 
          {renderedComponents} 
        &lt;/div&gt;
      );
    }
  }
  
  export default HomeContainer;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  
  Appreciate any insight! </code></pre>
  </div>
  </div>
  </p>