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://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container"></div>

JavaScript 1.7

var data = [{
  "text": "Amenities",
  "type": "multi",
  "name": "amenities",
  "value": [{
    "text": "24 Hour Checkin",
    "id": 24,
    "disabled": true,
    "selected": true
  }, {
    "text": "Breakfast",
    "id": 23,
    "disabled": true,
    "selected": true
  }, {
    "text": "WiFi",
    "id": 22,
    "disabled": true,
    "selected": true
  }, {
    "text": "Pure Veg Restaurant",
    "id": 21,
    "disabled": true,
    "selected": true
  }]
}, {
  "name": "stayType",
  "text": "Type of Stay",
  "type": "multi",
  "value": [{
    "text": "Hotels",
    "id": 20,
    "disabled": true,
    "selected": true
  }, {
    "text": "Lodges & Guest houses",
    "id": 19,
    "disabled": true,
    "selected": true
  }, {
    "text": "Resorts",
    "id": 18,
    "disabled": true,
    "selected": true
  }, {
    "text": "Homestays",
    "id": 17,
    "disabled": true,
    "selected": true
  }]
}]

const Filters = React.createClass({
  getInitialState: function () {
  	return { filters: this.props.filters } // just for test
  },

  isMulti: function (type) {
  	return type === 'multi';
  },

  filter: function (value, type) {
    return <li key={ value.id } className="pos-rel searchByNameTextBoxWrapper">
      <label>{ value.text }</label>
      <input maxLength="50" id={ value.id } type={ type } />
    </li>;
  },  

  filters: function () {
    return this.state.filters.map((r, i) => {
      return <div key={ i }>
      	<div className="filter-heading">{ r.text }</div>
        <ul className="section">
      		{ r.value.map((value, index) => this.filter(value, this.isMulti(r.type) ? 'checkbox' : 'radio')) } 
      	</ul>
      </div>
    });
  },

  render: function () {
  	var content = (this.state.filters.length) ? this.filters() : 'Loading';
    return (
      <div className="filters-sec-wrapper">
      	<div className="filters-inner-sec-wrapper">{ content }</div>
      </div>
    );
  }
});

ReactDOM.render( 
	<Filters filters={ data } /> ,
 ...