import React from 'react';

export class Parent extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            number: 0,
            number2: 0
        }
    }

    handleInputValue = (e) => {
        this.setState({
            number: e.target.value,
            number2: e.target.value
        })
    }

    handleIncrement = () => {
        this.setState( prevState => {
            return {number2: Number(prevState.number2)+1}
        });
    }

    handleDecrement = () => {
        this.setState( prevState => {
            return {number2: Number(prevState.number2)-1}
        });
    }

    render(){
        return(
            <div>
                <p>Parent</p>
                <input type="number" value={this.state.number} onChange={this.handleInputValue}/>
                <Child
                    handleChange={this.handleInputValue}
                    value={this.state.number2}
                    increment={this.handleIncrement}
                    decrement={this.handleDecrement}
                />
            </div>
        );
    }
}

class Child extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            number2: this.props.value
        }
    }
    handleIncrement = (e) => {
        return e.target.value + 1
    }
    render(){
        return(
            <div>
                <br/>
                <p>Child</p>
                <input type="number" onChange={this.props.handleChange} value={this.props.value}/>
                <br/>
                <br/>
                <div>
                    <button onClick={this.props.increment}>Increment</button>
                    <button onClick={this.props.decrement}>Decrement</button>
                </div>
            </div>

        )

    }
}

export default Parent