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

class AddTwoNumbers extends React.Component {
    state = {
        num1: '',
        num2: '',
    }

    handleChange1 = (e) => {
        this.setState({
            num1: e.target.value,
        });
    }

    handleChange2 = (e) => {
        this.setState({
            num2: e.target.value,
        });
    }

    render() {

        const num1 = Number(this.state.num1);
        const num2 = Number(this.state.num2);

        let text;
        if(Number.isNaN(num1) || Number.isNaN(num2)) {
            text = 'Podaj liczby!';
        } else {
            text = num1 + num2;
        }

        return (
            <div>
                <input onChange={this.handleChange1} value={ this.state.num1 } />
                <input onChange={this.handleChange2}  value={ this.state.num2 } />
                <h1>{text}</h1>
            </div>
        )
    }
}

class App extends React.Component {
    render() {
        return <AddTwoNumbers />
    }
}

document.addEventListener('DOMContentLoaded', function(){
    ReactDOM.render(
        <App/>,
        document.getElementById('app')
    );
});