Input value is null React

Question

I'm not sure what the deal is probably something stupid but when my handle email and handle password handlers are hit, I get null values for text that I entered on the form.

LoginContainer

  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: '',
        password: ''
      }

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

    handlePasswordInput(e, password) {
      e.persist()
      this.setState(password )
    }

    handleEmailInput(e, email) {
      e.persist()
      this.setState(email)
    }

    handleLoginPressed(e) {
      e.persist()
      // e.preventDefault()
      if (this.emailIsValid(this.state.email) &&
          this.passwordIsValid(this.state.password)) {
         this.props.login(this.state.email, this.state.password)
      }
    }

    emailIsValid(e, email) {
      e.persist()
      if (!email) {
        return false
      }
      return true
    }

    passwordIsValid(e, password) {
      e.persist()
      if (!password) {
        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)

Login

class Login extends Component {
  render(){
      return (
        <div>
          <LoginForm
            handleEmailInput={this.props.handleEmailInput}
            handlePasswordInput={this.props.handlePasswordInput}
            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 onSubmit={this.props.login}>
          <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"
              // value={this.state.email}
            />
            <ControlLabel>Password</ControlLabel>
            <FormControl
              bsSize="small"
              className="ft-password"
              componentClass="input"
              onChange={this.props.handlePasswordInput}
              placeholder="Enter Password"
              style={{ width: 300}}
              type="text"
              // value={this.state.password}
            />
          </FormGroup>
          <Button
            className='ft-login-button'
            type='submit'>Login</Button>
        </form>
      </div>)
  }

}

export default LoginForm

Answer 1

It looks like you were on the right path with the value={this.state.password}. But since your state is in the parent component, you have to pass the state down and the value becomes value={this.props.value}. The event handlers usually look something like this:

handlePasswordInput(e, password) {
      e.persist()
      this.setState({ password: e.target.value })
    }

They could be different due to the FormControl component but it's worth changing them to see if that's your problem. Also, onChange handlers implicitly pass in e and you have to use a arrow function expression to explicitly pass in anything else.

Edit: If they were able to do something like you mentioned in the comment, they probably did something like this:

handlePasswordInput(e, password) {
      e.persist()
      const password = e.target.value
      this.setState({ password })
    }

In es6, { password } is the same as { password: password}