JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.4.1/react.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.4.1/JSXTransformer.js"></script>
<script type="text/jsx">
/** @jsx React.DOM */
var FactoidList = React.createClass({
  render: function() {
    function test(){console.log('foo!')}
    var factoids = this.props.factoids;
    var createValue = function(factoidName) {
        return <div class='factoid-value'>{factoids[factoidName].value}</div>;
    };
    var createItem = function(factoidName) {
        return <li onClick={test} class='factoid-name'>{factoidName} {createValue(factoidName)}</li>;
    };
    return <ul class='factoid-list'>{Object.keys(factoids).map(createItem)}</ul>;
  }
});

var FactoidApp = React.createClass({
  getInitialState: function() {
      return {factoids:{}};
  },
  componentDidMount: function() {
    $.getJSON(this.props.source, function(result) {
      this.setState(result);
    }.bind(this));
  },
  render: function() {
    return (
      <div>
        <h3>Factoids</h3>
        <FactoidList factoids={this.state.factoids} />
      </div>
    );
  }
});

React.renderComponent(
  <FactoidApp source="http://www.corsproxy.com/boshi.inimino.org/ecmabot-factoids.json" />,
  document.body
);

$('.factoid-list').on('click', '.factoid-name', function(){
    $('.factoid-value', this).css('display', 'block');
});
</script>

CSS

.factoid-list { 
    list-style:none;
}

.factoid-value { 
    padding-left:20px;
    display:none;
}