import React from 'react'
import ReactDOM from 'react-dom'

class Button extends React.Component{

    handleClick = () => {
        this.props.incrementCounter(this.props.incrementable)
    }

    render(){
        return(
            <button onClick={this.handleClick}>+{this.props.incrementable}</button>
        )
    }
}

const Results = (props) => {
    return (
        <div>
            Result is: {props.counter}
        </div>
    )
}

class App extends React.Component{

    state = {
        counter: 1
    }

    incrementCounter = (incrementable) => {
        this.setState((prevState) => {
            return {
                counter: prevState.counter + incrementable
            }
        })
    }

    render(){
        return (
            <div>
                <Button incrementCounter={this.incrementCounter} incrementable={1}/>
                <Button incrementCounter={this.incrementCounter} incrementable={10}/>
                <Results counter={this.state.counter}/>
            </div>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('app'))