Another React State example
class Button extends React.Component{
handleClick=()=>{
this.props.clickHandler(this.props.incAmount);
}
render(){
return <button onClick={this.handleClick}> +{this.props.incAmount}</button>
}
}
class Result extends React.Component{
render(){
return <div>{this.props.count}</div>
}
}
class App extends React.Component{
state={counter:0};
handleClick=(x)=>{
this.setState(
{
counter:this.state.counter+x
});
};
render(){
return (
<div>
<Button incAmount={1} clickHandler={this.handleClick}/>
<Button incAmount={5} clickHandler={this.handleClick}/>
<Button incAmount={10} clickHandler={this.handleClick}/>
<Button incAmount={100} clickHandler={this.handleClick}/>
<Button incAmount={1000} clickHandler={this.handleClick}/>
<Result count={this.state.counter}/>
</div>
);
}
}
let mountNode = document.getElementById("container")
ReactDOM.render(<App/>,mountNode)