Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">

    class Button extends React.Component {

        constructor(props){
            super(props);
            this.state = {mass: "", height: "", bmi: ""}
        }
        componentDidMount = () => {
            console.log('Componen did mount')
        }

        changeMass = event => {
            this.setState({mass: event.target.value})
            this.calcBmi()
        }

        changeHeight = event => {
            this.setState({height: event.target.value})
            this.calcBmi()
        }


        calcBmi = () => {
            this.setState({bmi: this.state.mass / (this.state.height * this.state.height).toFixed(2)})
        }


        render = () => {
            return (<div>
            <h1>Bmi Calculator</h1>
            <p>Give weight</p>
            <input
            type="text"
            value={this.state.mass}
            onChange={this.changeMass}
            />
            <p>Give height</p>
            <input
            type="text"
            value={this.state.height}
            onChange={this.changeHeight}
            />
            <p value={this.state.bmi} onChange={this.calcBmi}>Your BMI is: {this.state.bmi}</p>
            </div>)
        }

    }
    ReactDOM.render(
    <Button bmi=""/>, document.getElementById('root')
    )
    </script>
</body>
</html>