title: ReactJS Uncaught TypeError: Cannot read property 'target' of undefined
body: <p>hello i am new to react and tried to create simple login like form, (while user gives special username and and password it shows special class Ok and gives some text, but if user inputs wrong password and/or username it shows special class but it gives me error in title. so here is code </p>
  
  <pre><code>import React, {Component} from 'react'
  
  
  
  class App extends Component{
  constructor(props){
  super(props);
  this.state = {password: '', username: ''}
  this.handleTextChange = this.handleTextChange.bind(this)
  this.handlePasswordChange = this.handlePasswordChange().bind(this)
  this.submit = this.submit.bind(this)
  }
  
  handleTextChange(e){
  this.setState({username: e.target.value})
  }
  
  handlePasswordChange(e){
  this.setState({password: e.target.value})
  }
  
  submit(e){
  (this.state.username === 'justusername' &amp;&amp; this.state.password !== 
  'justpassword') ? &lt;PasswordIncorrect password={this.state.password} /&gt;: 
   null;
   (this.state.username !== 'justusername' &amp;&amp; this.state.password === 
   'justpassword') ? &lt;UsernameIncorrect username={this.state.username} /&gt;: 
   null;
   (this.state.username !== 'justusername' &amp;&amp; this.state.password !== 
   'justpassword') ? &lt; BothIncorrect /&gt; : null;
   &lt;Ok /&gt;
   e.preventDefault()
   }
  
   render(){
   return(
   &lt;form onSubmit={this.submit}&gt;
    &lt;input type="text" placeholder="username" onChange={this.handleTextChange} 
   /&gt;
    &lt;input type="password" placeholder="password" onChange= 
   {this.handlePasswordChange} /&gt;
    &lt;button type="submit"&gt;Zaza&lt;/button&gt;
    &lt;/form&gt;
    )
    }
  }
  
  class UsernameIncorrect extends Component{
   render(){
     return(
     &lt;div&gt;username -&gt; {this.props.username} is incorrect&lt;/div&gt;
     )
   }
  }
  
  class PasswordIncorrect extends Component{
  render(){
  return(
    &lt;div&gt;password-&gt; {this.props.password} is incorrect&lt;/div&gt;
    )
   }
  }
  
  class BothIncorrect extends Component{
  render(){
  return(
    &lt;div&gt;both incorrect&lt;/div&gt;
    )
    }
    }
  
  class Ok extends Component{
  
  render(){
  const style = {
     backgroundColor: 'red'
  }
  return(
    &lt;div style={style}&gt;answer -&gt; + {1*5}&lt;/div&gt;
  )
   }
   }
  
  export default App;
  </code></pre>
  
  <p>i do not know what is problem (as i said i just started react) and i will be glad if someone will solve this problem</p>