React Base Fiddle (JSX)

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

by Pranesh456

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>

CSS

.highlighted {
  background: black;
  color: white;
}

JavaScript 1.7

var Hello = React.createClass({
	getInitialState(){
    return {
      showSuggestion: false,
      index: 0
    }
  },
  toggleSuggestion() {
  	this.setState({
    	showSuggestion: !this.state.showSuggestion
    })
  },
  handleSuggestion(e){
  	var s = this.refs.suggestion
    if(e.which === 40) {
  		this.setState({
        index: this.state.index < s.childElementCount ? ++this.state.index : this.state.index
        s.child
      })
      console.log(this.state)
    }
  },
  render: function() {
    return <div class="container">
    <input
    	id="input_city"
      type="text"
      onKeyDown={this.handleSuggestion}
      onFocus={this.toggleSuggestion}
      onBlur={this.toggleSuggestion}/>
    {
			this.state.showSuggestion &&    
      <div class="suggestions">
          <ul ref="suggestion">
              <li value="0" name="New York">New York</li>
              <li value="1" name="London">London</li>
              <li value="2" name="Paris">Paris</li>
              <li value="3" name="Sydney">Sydney</li>
          </ul>
      </div>
    }
    </div>
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);