SOURCE

// 9. Events in React -- basic event handling in React
// a click counter. The count increases upon hitting the button. If with shift-down, it increases 10x faster

class Counter extends React.Component{

    render(){
        var counterStyle={
            fontSize:80,
            fontFamily:'sans-serif',
            fontWeight: 'Bold',


            padding:'25px 0px 10px 0px'
        };
        return <div style= {counterStyle}>{this.props.count}</div>
    }
}

class CounterCase extends React.Component{

    constructor(props){
        super(props);
        this.state={
            count:0
        }
    }
    // method to handle the click Event
    // click with shift-down
    increase(e){
        var newCount;
        if(e.shiftKey){
            newCount= this.state.count+10;
        }else{
            newCount= this.state.count+1;
        }
        this.setState({count:newCount});
    }

    render(){
        var caseStyle={
            backgroundColor:'#ffeb3a',
            width:260,
            height: 200,
            borderRadius: 20,
            textAlign: 'center'
        };
        var buttonStyle={
            width:35,
            height: 35,
            fontSize:'1em',
            fontWeight: 'bold',
            lineHeight: '15px',
            textAlign: 'center'
        }
        return <div style={caseStyle}>
            <Counter count={this.state.count}/>
            <button style={buttonStyle} onClick={this.increase.bind(this)}>&nbsp;+</button>
        </div>
    }
}


ReactDOM.render(
    <CounterCase></CounterCase>,
    document.querySelector('#container9')
)

<div id="container9">
    <!-- This element's contents will be replaced with your component. -->
</div>

body{
  background-color: #FCFCFC;
}
.container p {
    font-size: 25px;
}