Todo list problem

<html>
    <head>
        <title>React</title>
        <script crossdomain src="https://unpkg.com/react@16/umd/react.development.js"> </script>
        <script crossdomain src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script>
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"> </script>
    </head>
    <body>
        <div id="container"></div>
        <script type="text/babel">
            let val='a';
            class ToDo extends React.Component{
                constructor(props){
                    super(props);
                    this.state={
                        value: ''
                    }
                    // console.log(props);
                    this.handleChange=this.handleChange.bind(this)
                }
                    handleChange=(event)=>{
                        let assignval=event.target.value
                        this.setState({value:assignval})
                        console.log(this.state.value)
                    }

                render(){
                    return(
                        <div>
                            <input value={this.state.value} onChange={this.handleChange} type='text'/>

                            <button type='submit' onSubmit={this.OnSubmit}>add</button>
                        </div>
                    )
                }
            }
            ReactDOM.render(<ToDo/>,document.querySelector('#container'))
        </script>
    </body>
</html>
<!--   This code is printing latest entered character less in the console -->