JSFiddle - React, Tailwind, and code Playground

by esbullington

HTML

<div id="chart"></div>

JavaScript

var DeviceModelComponent = React.createClass({

  handleClick: function(e) {
    e.preventDefault();
  },

  render: function() {
    return (
      <option value={this.props.model.get('model._id')} >
        {this.props.model.get('name')}
      </option>
    );
  }

});

var DeviceCollection = React.createClass({

  handleChange: function(e) {
    /* this.props.onChange(e.target.value) */
    console.log(this.props);
    console.log("Changing: " + e.target.value);
  },

  render: function() {
    console.log("This is a test: " + this.props.test);
    return (
      <select onChange={this.handleChange} className="form-control">
        <option select="selected">
          Please select a device
        </option>
        {this.props.collection.map(function(model, i){
          return <DeviceModelComponent model={model} key={i} />;
        })}
      </select>
    );
  }
});

var DevicePage = React.createClass({

  handleChange: function(val) {
    console.log("Handling it: " + val);
  },

  render: function() {
    return DeviceCollection({test: 'testing', collection: deviceCollection, onChange: this.handleChange });
  }

});


deviceCollection.fetch().done( function() {
  React.renderComponent(
    <DeviceCollection collection={deviceCollection} />, 
    document.getElementById("chart")
  );
});