counter-example

Counter.js

import React, { Component } from 'react';

export default class Counter extends Component {
    constructor (props) {
        super(props);
        this.state = {counter:0};
    }
    change = (val) => () => this.setState({counter:(this.state.counter + val)});
    render () {
        return (
            <div style={divStyle}>
                <button style={buttonStyle} onClick={this.change(-1)}>-1</button>
                <span style={counterStyle}>{this.state.counter}</span>
                <button style={buttonStyle} onClick={this.change(+1)}>+1</button>
            </div>
        );
    }
}

const divStyle = {
    fontFamily: '"Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif'
}

const buttonStyle = {
    display: "inline-block",
    height: 38,
    padding: "0 30px",
    color: "#555",
    textAlign: "center",
    fontSize: 13,
    fontWeight: 600,
    lineHeight: 0,
    letterSpacing: ".1rem",
    textTransform: "uppercase",
    textDecoration: "none",
    whiteSpace: "nowrap",
    backgroundColor: "transparent",
    borderRadius: 4,
    border: "1px solid #bbb",
    cursor: "pointer",
    boxSizing: "border-box",
    margin:5
}

const counterStyle = {
    display: "inline-block",
    fontWeight: 900,
    width: 100,
    fontSize: 22,
    color: "#000"
}