learn_react_1_by_khunemz

learn_react_1

// Write JavaScript here and press Ctrl+Enter to execute
// React, ReactDOM

class Button extends React.Component {

	// constructor(props) {
	// super(props);
	// this.state = { cnt: 0 }; 
	// }
  
  handleClick = function () {
  // this === component instance
   this.props.conClickFunction(this.props.incrementValue);
  };
  
 
  render() {
    return <button onClick="{this.handleClick}">
    +{this.props.incrementValue}</button>
  }
}

 const Result = (props) => {
  	return (
    	<div>{props.cnt}</div>
    );
  }
  
  class App extends React.Component {
  	state = { cnt: 0 };
  	incrementcnt = function() {
     this.setState({
     	function (prevState) {
      	cnt: prevState.cnt + incrementValue;
      }
     });
    };
  	render() {
    	return (
      	<div>
        	<Button incrementValue={1} onClickFunction="{this.incrementcnt}" />
        	<Button incrementValue={2} onClickFunction="{this.incrementcnt}" />
        	<Button incrementValue={5} onClickFunction="{this.incrementcnt}" />
          <Result cnt={this.state.cnt} />
        </div>
      );
    }
  }

ReactDOM.render(<App /> , mountNode);