Cannot read property 'state' of undefined in ReactJS (Gatsby) [duplicate]

Question

I have the following code:

export default class Contact extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        password: '',
        redirect: false,
        username: ''
      };

  this.onUsernameChange = this.onUsernameChange.bind(this);
  this.onPasswordChange = this.onPasswordChange.bind(this);
}

onUsernameChange(event) {
  this.setState({ username: event.target.value });
}

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

handleSubmit(event) { 
  event.preventDefault();
  alert('A name was submitted: ' + this.state.username);

  //sessionStorage.setItem('username', this.state.username);

}

render() {

  return (
      <div>
        <form className="form-signin" onSubmit={this.handleSubmit}>
          <input type="text" value={this.username} onChange={this.onUsernameChange} />
          <input type="password" value={this.password} onChange={this.onPasswordChange} />
          <input type="submit" value="Submit" />
        </form>
      </div>
  );
}
}

After I submit the username and password: I get the following error:

TypeError: Cannot read property 'state' of undefined

On the following line:

alert('A name was submitted: ' + this.state.username);

What is the problem? Does the username not save? (I am using gatsby-reactjs)

Anand Undavia · Accepted Answer · 2018-07-19 17:28:40Z

5

You forgot to bind the handleSubmit as well

Do:

this.onUsernameChange = this.onUsernameChange.bind(this);
this.onPasswordChange = this.onPasswordChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);

in the constructor

answered Jul 19, 2018 at 17:28

Anand Undavia

3,5535 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anshul Bansal · Accepted Answer · 2018-07-19 17:39:14Z

5

You can also use the es6 format for functions which would prevent writing extra code for binding the this context everytime in the constructor. For example.

onUsernameChange = event => {
  this.setState({ username: event.target.value });
}

answered Jul 19, 2018 at 17:39

Anshul Bansal

1,8831 gold badge14 silver badges13 bronze badges

Comments

Ron Arel · Accepted Answer · 2018-07-19 17:29:22Z

2

I needed to add:

this.handleSubmit = this.handleSubmit.bind(this);

In the constructor!

answered Jul 19, 2018 at 17:29

Ron Arel

3711 gold badge5 silver badges14 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'state' of undefined in ReactJS (Gatsby) [duplicate]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related