<!DOCTYPE html>
<html>

  <head>
    <script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
    <script data-require="react@*" data-semver="15.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react-dom.min.js"></script>
    <script data-require="ramda@*" data-semver="0.23.0" src="https://unpkg.com/ramda@0.23.0/dist/ramda.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="app"></div>
    <script src="script.js"></script>
  </body>

</html>
const {inc, dec, lensProp, over} = R

const countL = lensProp('count')
const transformCount = over(countL)
const incCount = transformCount(inc)
const decCount = transformCount(dec)

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }
    this.increase = this.increase.bind(this)
    this.decrease = this.decrease.bind(this)
  }
  
  increase() {
    this.setState(incCount)
  }
  
  decrease() {
    this.setState(decCount)
  }

  render() {
    return (
      <div>
        <button onClick={this.increase}>+</button>
        <div>
          {this.state.count}
        </div>
        <button onClick={this.decrease}>-</button>
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'))

/* Styles go here */