SO-react-radio-checked

// using react 0.14.3
// using react-router 0.13.5 ( I suck, I know )

import React from 'react';
import Router from 'react-router';


let Route = Router.Route;


class Widget extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			currentValue: null // tracks currently-selected choice, by its value
		};
	}

	componentWillUpdate() {
		console.log(`${new Date().getTime()} > widget.componentWillUpdate`);
	}

	onClickOptionRadio = (event) => {
		console.log(`${new Date().getTime()} > widget.onClickOptionRadio`);
		event.preventDefault();
		event.stopPropagation();

		this.setState({
			currentValue: event.currentTarget.value
		});
	}

	onConfirm = (event) => {
		console.log(`${new Date().getTime()} > widget.onConfirm`);
		if(!this.props.onChange) return;

		event.preventDefault();
		event.stopPropagation();

		this.props.onChange(this.state.currentValue);
	};

	render() {
		let choices = this.props.choices;
		let currentValue = this.state.currentValue;

		console.log(`currentValue=${currentValue}`);


		return (
			<div className="Widget">
				I AM WIDGET<br />
				<ol className="choices">
					{
						choices.map((choice, i) => {
							// decide whether to mark radio as checked:
							// - if no current choice, check first radios
							// - otherwise, check radio matching current choice
							let noCurrentChoice      = (currentValue === null);
							let drawingFirstChoice   = (i === 0);
							let thisChoiceIsSelected = (String(choice.value) === String(currentValue));
							let checkThisOption      = thisChoiceIsSelected || (noCurrentChoice && drawingFirstChoice);

							console.log(`${i} noCurrentChoice:${noCurrentChoice.toString()}`);
							console.log(`${i} drawingFirstChoice:${drawingFirstChoice.toString()}`);
							console.log(`${i} thisChoiceIsSelected:${thisChoiceIsSelected.toString()}`);
							console.log(`${i} checkThisOption:${checkThisOption.toString()}`);

							return (
								<li key={i}>
									<input type="radio" name="choice"
										value={choice.value}
										onChange={this.onClickOptionRadio}
										checked={checkThisOption}
										data-ischecked={checkThisOption}
										/>

									<label>{choice.label}</label>
									{' '}

									{checkThisOption ? 'CHECKED' : ''}
								</li>
							);
						})
					}
				</ol>

				<button onClick={this.onConfirm}>
					Confirm choice
				</button>

			</div>
		);
	}

}


class Root extends React.Component {
	constructor(props) {
		super(props);
		this.state = {};
	}

	componentWillMount() {
		console.log(`root mounting`);
	}

	componentWillUpdate() {
		console.log(`${new Date().getTime()} > root.componentWillUpdate`);
	}

	render() {
		let choices = [
			{ value: 0, label: 'first' },
			{ value: 1, label: 'second' },
			{ value: 2, label: 'third' }
		];

		return (
			<div className="Root">
				I AM ROOT<br />
				<Widget
					choices={choices}
					/>
			</div>
		);
	}
}


Router.create({
	routes: <Route name="root" path="/" handler={Root} />
}).run((Handler) => {

	console.log(`hi`);

	React.render(
		<Handler />,
		document.getElementById('Root')
	);
});