two way data binding in reactjs by vicapow

index.html

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="//fb.me/react-0.10.0.js"></script>
  <script src="//fb.me/JSXTransformer-0.10.0.js"></script>
</head>
<body>
<script type="text/jsx">
/** @jsx React.DOM */

var Slider = React.createClass({
  getDefaultProps: function() {
    return {
      handleChange: function(){ }
    }
  },
  render: function() {
    return this.transferPropsTo(
      <input type="range" />
    )
  }
})

var HelloMessage = React.createClass({
  getInitialState: function() {
    return { value: 10 };
  },
  handleChange: function(e) {
    var el = e.currentTarget
    // console.log(el.value)
    this.setState({value: e.currentTarget.value})
  },
  render: function() {

    var sliders = [];
    for(var i = 0; i < 100; i++) {
      sliders.push(<Slider value={this.state.value} onChange={this.handleChange} />);
    }

    return <div>
      {sliders}
    </div>
  }
})

var body = document.getElementsByTagName('body')[0]
React.renderComponent(<HelloMessage name="John" />, body)
</script>
</body>
</html>