React Base Fiddle (JSX)

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

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="app">
</div>

JavaScript 1.7

var distances = [
	{name:"5K",miles:3.1069},
	{name:"5M",miles:5},
	{name:"10K",miles:6.2137},
	{name:"10M",miles:10},
	{name:"20K",miles:12.4274},
	{name:"Half Marathon",miles:13.11},
	{name:"Marathon",miles:26.219}
];

var SelectCalc=React.createClass({

	getInitialState: function() { 
		return {
			selected:"0",
            calcForm: document.createElement('div')
		}; 
	},

    componentDidMount: function() {
        document.getElementById('app').appendChild(this.state.calcForm);
    },

	handleSelect:function(e){
		var selected=e.target.value;
		if(selected!=""){
			this.setState({selected: e.target.value});
			//React.render(React.createElement(CalcForm, {selected: selected, distances: distances}),document.getElementById('calcForm'));
            React.render(<CalcForm selected={selected} distances={distances} />, this.state.calcForm);
		}
	},
	
	
	render: function(){
		return (
			<select id="calculations" onChange={this.handleSelect} value={this.state.calculations}>
            <option value="0">SELECT CALCULATION FORM</option>
			<option value="1">Enter pace and distance to get a total time</option>
			<option value="2">Enter distance and target time to get the required pace</option>
			<option value="3">Enter pace and time to get the distance run</option>
			<option value="4">Convert mph to mins/mile</option>
			<option value="5">Convert mins/mile to mph</option>
		</select>
		);
	}
});

var TimeForm= React.createClass({
	getInitialState: function() { 
		return {
			pace:'10:00',
			distance:26.2,
			totalTime:'0:00:00',
			mph:0
		}; 
	},
	
	handlePaceChange:function(e){
        this.setState({pace:e.target.value},this.calcTime);
	},
	
	handleDistanceChange:function(e){
		this.setState({distance:e.target.value},this.calcTime);

	},
	
	setDistance:function(e){
		var miles=e.target.value;
		if(miles>0){
			this.setState({distance:miles},this.calcTime);
		}
	},

	
	calcTime: function(){
		var miles=this.state.distance;
		var pace=this.state.pace;
		var...