Pulse7
8/1/2017 - 6:08 PM

Another React State example

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)