playing with react

playing-with-react-3.js

const Result = (props) => {
	return (
  	<div>{props.counter}</div>
  );
}

class Button extends React.Component {
	
	handleClick = () => {
  	this.props.onClickFunction(this.props.incrementValue);
  }
  
	render() {
  	return (
    	<button type="button" onClick={this.handleClick}>{this.props.incrementValue}</button>
    );
  }
}

class App extends React.Component {
	constructor() {
  	super();
    this.state = {counter : 0};
  }
  
  incrementCounter = (incrementBy) => {
  	this.setState(prevState => ({counter: prevState.counter + incrementBy}));
  }
  
	render() {
  	return (
    	<div>
      	<div>
      		<Button incrementValue={+1} onClickFunction = {this.incrementCounter}/>
        	<Button incrementValue={+5} onClickFunction = {this.incrementCounter}/>
        	<Button incrementValue={+10} onClickFunction = {this.incrementCounter}/>
        	<Button incrementValue={+100} onClickFunction = {this.incrementCounter}/>  
      	</div>
        <div>
        	<Button incrementValue={-1} onClickFunction = {this.incrementCounter}/>
        	<Button incrementValue={-5} onClickFunction = {this.incrementCounter}/>
        	<Button incrementValue={-10} onClickFunction = {this.incrementCounter}/>
        	<Button incrementValue={-100} onClickFunction = {this.incrementCounter}/>
        </div>
        <Result counter={this.state.counter}/>
    	</div>
    );
  }
}

ReactDOM.render(<App/>, mountNode)