ReactJS Uncaught TypeError: Cannot read property 'target' of undefined

Question

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

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' && this.state.password !== 
'justpassword') ? <PasswordIncorrect password={this.state.password} />: 
 null;
 (this.state.username !== 'justusername' && this.state.password === 
 'justpassword') ? <UsernameIncorrect username={this.state.username} />: 
 null;
 (this.state.username !== 'justusername' && this.state.password !== 
 'justpassword') ? < BothIncorrect /> : null;
 <Ok />
 e.preventDefault()
 }

 render(){
 return(
 <form onSubmit={this.submit}>
  <input type="text" placeholder="username" onChange={this.handleTextChange} 
 />
  <input type="password" placeholder="password" onChange= 
 {this.handlePasswordChange} />
  <button type="submit">Zaza</button>
  </form>
  )
  }
}

class UsernameIncorrect extends Component{
 render(){
   return(
   <div>username -> {this.props.username} is incorrect</div>
   )
 }
}

class PasswordIncorrect extends Component{
render(){
return(
  <div>password-> {this.props.password} is incorrect</div>
  )
 }
}

class BothIncorrect extends Component{
render(){
return(
  <div>both incorrect</div>
  )
  }
  }

class Ok extends Component{

render(){
const style = {
   backgroundColor: 'red'
}
return(
  <div style={style}>answer -> + {1*5}</div>
)
 }
 }

export default App;

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

Answer 1

I know this is not the direct cause of the issue you have in the title (which has been successfully answered) but there are some other issues with your code that I would like to point out that might help you out a bit.

The first are the ternary operations in the submit() function. Those aren't going to work there like that. What would work is:

  submit(e) {
    e.preventDefault();
    if (this.state.username === 'justusername' && this.state.password !== 'justpassword') {
      return <PasswordIncorrect password={this.state.password} />;
    }
    if (this.state.username !== 'justusername' && this.state.password === 'justpassword') {
      return <UsernameIncorrect username={this.state.username} />;
    }
    if (this.state.username !== 'justusername' && this.state.password !== 'justpassword') {
      return <BothIncorrect />;
    }

    return <Ok />;
  }

But as a form submit function this doesn't make too much sense - those components aren't going to be added to your page. A better course of action would be to set an error message in your state - update it based on each of those and render it to your page. Eg:

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { errorMessage: '', password: '', username: '' };
    this.handleTextChange = this.handleTextChange.bind(this);
    this.submit = this.submit.bind(this);
  }

  handleTextChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  submit(e) {
    e.preventDefault();
    if (this.state.username === 'justusername' && this.state.password !== 'justpassword') {
      this.setState({errorMessage: 'Password incorrect'});
    }
    if (this.state.username !== 'justusername' && this.state.password === 'justpassword') {
      this.setState({errorMessage: 'Username incorrect'});
    }
    if (this.state.username !== 'justusername' && this.state.password !== 'justpassword') {
      this.setState({errorMessage: 'Both incorrect'});
    }
  }

  render() {
    return (
      <form onSubmit={this.submit}>
        {/* Note the error message rendered here */}
        {this.state.errorMessage}
        <input name="username" type="text" placeholder="username" onChange={this.handleTextChange} />
        <input name="password" type="password" placeholder="password" onChange={this.handleTextChange} />
        <button type="submit">Zaza</button>
      </form>
    );
  }
}

export default App;

Answer 2

Change this this.handlePasswordChange().bind(this) to this.handlePasswordChange.bind(this)