React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by _alexander_

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var App = React.createClass({
	columns: function(condition) {
    return this.props.data
      .filter((e) => e.title === condition)
      .map(e => e.columns)
      .reduce((prev, current) => prev.concat(current), [])
      .map((column) => <p>{ column.name }</p>)
  },

  render: function() {
  	const condition = 'Table 1';
    return <div>{ this.columns( condition ) }</div>;
  }
});

const data = [{
  lookups: [], 
  rows: [{data: {a: 1, b: 2}}, {data: {a: 3, b: 4}}], 
  title: "Table 1", 
  columns: [{name: "a"}, {name: "b"}]
}, {
  lookups: [],
  rows: [{data: {c: 5, d: 6}}, {data: {c: 7, d: 8}}],
  title: "Table 2",
  columns: [{name: "c"}, {name: "d"}]
}, {
  lookups: [],
  rows: [],
  title: "Table 1",
  columns: [{name: "m"}, {name: "n"}]
}];

ReactDOM.render(
  <App data={ data } />,
  document.getElementById('container')
);