var React = require('react');

var Component = React.createClass({
  getInitialState: function() {
    return {
      counter: 0
    };
  },
  
  render: function() {
    return (
      <div>
        <input type='number' ref='step' />
        <button type='button' onClick={this._increase}>increase</button>
        <p>{this.state.counter}</p>
        <button type='button' onClick{this._decrease}>decrease</button>
      </div>
    );
  },
  
  _getStep: function() {
    var node = React.findDOMNode(this.refs.step);
    return node.value;
  },
  
  _increase: function() {
    var new_val = this.state.counter + this._getStep();
    this.setState({counter: new_val});
  },
  
  _decrease: function() {
    var new_val = this.state.counter - this._getStep();
    this.setState({counter: new_val});
  }
});

module.exports = Component;