JSFiddle - React, Tailwind, and code Playground

by zeen

HTML

<script src="https://fb.me/react-with-addons-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<main id="app"></main>

<script type="text/jsx">
    (function (window) {
	'use strict';
	var React = window.React;
			
	var data = {items: [
{ itemClass: 'Item', id: 1, contentsHTML: '', text: 'Item 1'},
{ itemClass: 'Item', id: 2, contentsHTML: '', text: 'Item 2'},
{ itemClass: 'Item', id: 3, contentsHTML: '', text: 'Item 3'},
{ itemClass: 'Item', id: 4, contentsHTML: '', text: 'Item 4'},
{ itemClass: 'Item', id: 5, contentsHTML: '', text: 'Item 5'}
]};
			
	var MyCatalog = React.createClass({
		        getInitialState: function() {
				    return { data: { items: [] } };
				},
				
				componentDidMount: function () {
					this.setState({ data: this.props.data });
				},
				
				render: function () {
					return (
						<div className="catalog">
							HELLO!!! I AM A CATALOG!!!
							
							<ItemList data={this.state.data}/>
						</div>
					);
				}
			});
			
			var ItemList = React.createClass({
				render: function () {
					console.log(this.props);
					
	var items = this.props.data["items"].map(function (itemData) {
  var klass = itemData['itemClass'] || 'Item';
  var ItemFactory = React.createFactory(klass);
						
//return <ItemFactory key={itemData['id']} data={itemData}/> // no
//return <klass key={itemData['id']} data={itemData}/> // no
//return React.createElement(klass, { key: itemData['id'], data: itemData }); // no
//return <Item data={itemData}/> // ok
//return React.createElement(Item, { data: itemData }); // ok
//return React.createElement('Item', { key: itemData['id'], data: itemData }); // no
//return React.createElement(React.createFactory('Item'), { data: itemData }); // no, error
var component = Components['itemClass'];
                            return <component data={itemData} key={itemData['id']}/>						
					});
					console.log(items);
					return (
React.createElement('div', { className: 'list'...