JSFiddle - React, Tailwind, and code Playground
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 component = Components[itemData['itemClass']];
return React.createElement(component, {
...