CODEWITHSUNDEEP
javascriptreactjs
user3348410
user3348410

Reputation: 2833

React can't make if statement with state

I have 2 inputs one of them is username, another is password.

I want to make client side basic login pass control but it's not working.

Here is the problem, when i write correct username and password if statement going to else so it's not working but in login() function i can get with console log input value with console.log(this.state.password) eg.

in my component: 

class Login extends Component {

    constructor() {
      super();
      this.state = {email : '', password: ''}
    }
    handleChange = (e) =>{ 
      this.setState({email: e.target.value});
    }
    password = (e) => {
      this.setState({password: e.target.value})
    }

    login() {
      if (this.state.email === '[email protected]' && this.state.password === 'asd123') {
        this.props.userLogin()
      } else {
        alert('username or password incorrect')
      }
    }


    render() {

    return (
      <Row className='justify-content-md-center login-panel'>
        <Col lg={12}>
        <Row className="justify-content-md-center">
          <Col lg={3}>
          <Form>
              <Form.Group>
                <Form.Control type="email" placeholder="Enter email" value={this.state.email} onChange={this.handleChange} />
              </Form.Group>
              <Form.Group controlId="formBasicPassword">
                <Form.Control type="password" placeholder="Password" value={this.state.password} onChange={this.password} />
              </Form.Group>
              <Button onClick={this.login}>
                Submit
              </Button>
          </Form>
          </Col>
        </Row>
        </Col>
      </Row>
    )
  }
}

Upvotes: 2

Views: 746

Answers (2)

vikrant
vikrant

Reputation: 2257

The this keyword must point to the correct object, so you have the following options:

  1. Use class field syntax (do not use constructor inside class). Some disadvantages are that every time you create a new object from the class, it will create a copy of all the methods, and you can't override class field functions in subclasses. Also, we can't use them to override superclass methods.

    class MyComponent extends React.Component{
state={email : '', password: ''}; //no constructor used

handleChange = (e) =>{            //arrow function
      this.setState({email: e.target.value});
    }

render(){
}
}

  2. If using a constructor, always bind the functions with this:

     class MyComponent extends React.Component{
 constructor() {
 super();
 this.state = {email : '', password: ''}
 this.login= this.login.bind(this); //binding the login function
}

handleChange = (e) =>{    //no need to bind as it is an arrow function
      this.setState({email: e.target.value});
    }

login() {
  if (this.state.email === '[email protected]' && this.state.password === 
'asd123') {
    this.props.userLogin()
  } else {
    alert('username or password incorrect')
  }
}

render(){
}
}

Upvotes: 3

jayarjo
jayarjo

Reputation: 16716

Your login() method is unbounded, so it doesn't know what this refers to. If you console.log(this) from login() you will see that it outputs some other object instead (usually a global one, like window).

This can be fixed in various ways, but the simplest one will be to change login() { to login = () => {. Similar to how you have handleChange defined.

Upvotes: 1

Related Questions