title: How to best render react components dynamically from data model
body: <p>I'm trying to create texteditor with React.JS that works a bit like Sir Trevor(<a href="https://madebymany.github.io/sir-trevor-js/example.html" rel="nofollow">https://madebymany.github.io/sir-trevor-js/example.html</a>). So you basically have blocks of different types of content that you order, edit and embed.</p>
  
  <p>I have a JSON data set from the backend that looks like this.</p>
  
  <pre class="lang-js prettyprint-override"><code>var content = [
      {"tag": "p", "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."},
      {"tag": "Youtube", "content": "dQw4w9WgXcQ"},
      {"tag": "ul", "content": [
          {"tag": "li", "content": "Rick"},
          {"tag": "li", "content": "Astley"},
      ]},
      {"tag": "TagCloud", "content": ["news","opinon","papers"]}
  ];
  </code></pre>
  
  <p>Youtube and TagCloud are React classes. I render the code like this:</p>
  
  <pre><code>var ArticleContent = React.createClass({
    render: function() {
      var elments = this.props.content;
      var reactElements = []
      for (var elementIndex in elments) {
        if (elments.hasOwnProperty(elementIndex)) {
          var tagname = elments[elementIndex].tag;
          var content = elments[elementIndex].content;
          console.log(tagname.toString());
          if(!/(div|p|li)/.test(tagname))
            tagname = React.createFactory(tagname)
          reactElements.push(React.createElement(tagname, null, content));
        }
      }
  
      return (
        React.createElement('div', {className: 'articleContent'},
          reactElements
        )
      );
    }
  });
  React.render(
    &lt;ArticleContent content={content}&gt;&lt;/ArticleContent&gt;
    document.getElementById('content')
  );
  </code></pre>
  
  <p>Now my whish is to render normal html tags with just createElement, but for those matching a defined React component Class, I want to render using the components render method.</p>
  
  <p>As far as I understand this is not possible because <code>createElement</code> only accepts proper React objects or strings of html tags. Help please :)</p>