7

I followed the React Form tutorial to create the component below:

export default class SignInForm extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      email: '',
      password: ''
    }

    this.onEmailChange = this.onEmailChange.bind(this)
    this.onPasswordChange = this.onPasswordChange.bind(this)
  }

  onEmailChange(event) {
    this.setState({email: event.target.value})
  }

  onPasswordChange(password) {
    this.setState({password: event.target.value})
  }

  render() {
    return (
      <form onSubmit={this.props.handleSubmit}>
        <div>
          <label>Email</label>
          <div>
            <input type="email"
              placeholder="you@gmail.com"
              onChange={this.onEmailChange}
              value={this.state.email}
            />
          </div>
        </div>
        <div>
          <label>Password</label>
          <div>
            <input type="password"
              placeholder="Password"
              onChange={this.onPasswordChange}
              value={this.state.password}
            />
          </div>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    )
  }
}

As soon as the form renders, I get the following error:

SignInForm is changing a controlled input of type password to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component

I cannot find the place where I am making it an uncontrolled component. What am I doing wrong?

Maximus S
  • 10,759
  • 19
  • 75
  • 154
  • 1
    I got this error because I forget to set an initial state for the value, adding this as a comment in case it helps others. – Drazisil Jul 23 '17 at 15:49

1 Answers1

7

It looks like your onPasswordChange method should probably be:

onPasswordChange(event) {
    this.setState({password: event.target.value})
}
mejdev
  • 3,509
  • 4
  • 24
  • 38
  • 2
    In case there are other poor readers like me: The difference is the OP's function argument (password) should have been (event). – forforf Jan 01 '17 at 23:58