Can't get Button to Fire Handler

Question

I suck at testing react apps, haven't done a ton...especially events yet

Given this code below, when I click the submit button in the browser, I don't see any errors. I'm trying to use react bootstrap's event properties to set them to my handlers which I receive via props.

The only thing I see is:

I'm not sure how to really test this TBH. I don't think it's working.

The code

Login

class Login extends Component {
  render(){
      return (
        <div>
          <LoginForm login={this.props.login} />
        </div>
      )
  }
}
export default Login

LoginForm

import React, { Component } from 'react'
import { Button, FormControl, FormGroup, ControlLabel, PageHeader } from 'react-bootstrap'

class LoginForm extends Component {
  render(){
    return (
      <div className='ft-login-form'>
        <PageHeader className='ft-header'>Login</PageHeader>
        <form>
          <FormGroup controlId="formBasicText" >
            <ControlLabel>Email</ControlLabel>
            <FormControl
              bsSize="small"
              className="ft-username"
              componentClass="input"
              onChange={this.props.handleEmailInput}
              placeholder="Enter mail"
              style={{ width: 300}}
              type="text"

            />
            <ControlLabel>Password</ControlLabel>
            <FormControl
              bsSize="small"
              className="ft-password"
              componentClass="input"
              onChange={this.props.handlePasswordInput}
              placeholder="Enter Password"
              style={{ width: 300}}
              type="text"

            />
          </FormGroup>
          <Button
            className='ft-login-button'
            onClick={this.props.login}
            type='submit'>Login</Button>
        </form>
      </div>)
  }

}

export default LoginForm

LoginContainer

import { connect } from 'react-redux'
import React, { Component } from 'react'

import * as AsyncActions from '../actions/User/UserAsyncActions'
import Login from '../components/Login/Login'

class LoginContainer extends Component {
  constructor(props) {
    super(props)
    this.state = {
      email: null,
      password: null
    }

    this.handleEmailInput = this.handleEmailInput.bind(this)
    this.emailIsValid = this.emailIsValid.bind(this)
    this.handlePasswordInput = this.handlePasswordInput.bind(this)
  }

  handlePasswordInput(password) {
    this.setState({ password })
  }

  handleEmailInput(email) {
    this.setState({ email })
  }

  handleLoginPressed() {
    console.log("got here")
    const { email, password } = this.state

    if (this.emailIsValid(this.state.email) &&
        this.passwordIsValid(this.state.password)) {
      this.props.login(email, password)
    }
  }

  emailIsValid(email) {
    if (!email) {
      alert('Email is required')
      return false
    }
    return true
  }

  passwordIsValid(password) {
    if (!password) {
      alert.alert('Error', 'Password is required');
      return false
    }
    return true
  }

  render(){
    return( <Login
      handleEmailInput={this.handleEmailInput}
      handlePasswordInput={this.handlePasswordInput}
      login={this.handleLoginPressed}
    /> )
  }
}

const mapStateToProps = state => {
  return {
    requesting: state.user.requesting,
    loggedIn: state.user.loggedIn,
    token: state.user.token,
    session: state.user.session
  }
}

export const mapDispatchToProps = {
  login: AsyncActions.login
}

export { Login }
export default connect(mapStateToProps, mapDispatchToProps)(LoginContainer)

Answer 1

Put this.handleLoginPressed = this. handleLoginPressed.bind(this) this.handleLoginPressed = this. handleLoginPressed.bind(this) in your constructor. You use this.state in handleLoginPressed() method, but it's undefined, you actually don't have { email, password } there.

Answer 2

When using a type="submit" button, you should use the <form> 's onSubmit event rather than the <button> 's onClick event.

<form onSubmit={this.props.login}>

You'll also need to cancel regular form submission in the event handler:

handleLoginPressed(e) {
  e.preventDefault()
  // ...
}