<!DOCTYPE html>
<html>
<head>
<script src="js/react.js"></script>
<script src="js/JSXTransformer.js"></script>
<link rel="stylesheet" tpe="text/css" href="style.css"/>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
var data = [
{name: 'Red', value: 'red'},
{name: 'Blue', value: 'blue'},
{name: 'Yellow', value: 'yellow'},
{name: 'Green', value: 'green'},
{name: 'White', value: 'White'}
];
var TabSelector = React.createClass({
getInitialState: function() {
return {selected: this.props.selected};
},
handleOnClick: function (evt) {
this.setState({'selected': evt.target.getAttribute('data-value')})
},
render: function() {
var tabs = this.props.data.map(function (item) {
var selected = item.value == this.state.selected ? 'selected' : '';
return <li data-value={item.value}
className={selected}
onClick={this.handleOnClick}
>{item.name}</li>
;
}, this);
return <div className="tab-selector">
<label>{this.props.label}</label>
<ul>
{tabs}
</ul>
</div>
;
}
});
React.render(
TabSelector({label: 'Color', data: data, selected: null}),
document.getElementById('container')
);
</script>
</body>
</html>
