JSFiddle - React, Tailwind, and code Playground

by ChrisLTD

HTML

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="rfp-form"></div>

JavaScript

var TextInput = React.createClass({
  render: function() {
    return (
      <input type={this.props.type} onChange={this.props.onChange} value={this.props.value} name={this.props.name}></input>
    );
  }
});

var RFPForm = React.createClass({

  locations: [
    { slug: "hollywood", name: "Hollywood" },
    { slug: "southbeach", name: "South Beach" },
    { slug: "newyorkcity", name: "New York City" }
  ],

  errorColor: "red",

  getInitialState: function() {
    return {
      "numberVal": 3,
      bgColor: this.errorColor,
      location: null
    }
  },

  componentDidMount: function() {
    // set form with initial location set from window hash
    if(window.location.hash) {
      // todo: check to see if hash is actually a valid location
      this.setState({ location: window.location.hash.slice(1) });
    }
  },

  onChange: function(event) {

    // console.log(event.target);

    this.setState({[event.target.name]: event.target.value});

  },

  createValidation: function(errorMessage) {
    if( this.state.numberVal > 9 ){
      return (
        <div>{errorMessage}</div>
      );
    }
  },

  render: function() {
    that = this;

    return (
      <form>
        <h1>I am your form.</h1>

        <select value={this.state.location}>
          <option>Select a Location</option>
          {this.locations.map(function(location){
            return (
              <option key={location.slug} value={location.slug}>
                {location.name}
              </option>
            )
          })}
        </select>
        <br />

        <TextInput type="number" onChange={this.onChange} value={this.state.numberVal} name="numberVal"></TextInput>
        <br />

        {this.createValidation("number too big!")}
      </form>
    );
  }

});

ReactDOM.render(
  <RFPForm></RFPForm>,
  document.getElementById('rfp-form')
);