Uncaught TypeError: Cannot read properties of undefined (reading 'setState')

Question

class SignIn extends React.Component {
  constructor() {
    super();
    this.state = {
      SignInuserName: "",
      SignInPassword: "",
    };
  }
  onUsernameChange(event) {
    console.log(event.target.value);
    this.setState({ SignInuserName: event.target.value });
  }
  onPasswordChange(event) {
    console.log(event.target.value);
    this.setState({ SignInPassword: event.target.value });
  }
  onSubmitSignin = () => {
    console.log(this.state);
    this.props.onRouteChange("home");
  };

render(){
return(
<div>
<input className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
       type="text"
       name="user-name"
       id="user-name"
       onChange={this.onUsernameChange}
                />

<input className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
       type="password"
       name="password"
       id="password"
       onChange={this.onPasswordChange}
                />


<input className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
       type="submit"
       value="Sign in"
       onClick={this.onSubmitSignin}
                />
</div>
)}

when i type in username or password input i am getting this error :

Uncaught TypeError: Cannot read properties of undefined (reading 'setState')

and input tag value that i typed not going in this.state it alway return empty values in but console.log(event.target.value) is getting logged correctly

SignInuserName: "",
SignInPassword: ""

Can you add these 2 lines in your constructor? `this.onUsernameChange = this.onUsernameChange.bind(this)` and `this.onPasswordChange = this.onPasswordChange.bind(this)`. Reference: https://stackoverflow.com/questions/39176248/react-js-cant-read-property-of-undefined — vighnesh153, Nov 02 '22 at 04:20
Does this answer your question? [React.js - Can't read property of undefined](https://stackoverflow.com/questions/39176248/react-js-cant-read-property-of-undefined) — vighnesh153, Nov 02 '22 at 04:24
but i can't understand what these 2 lines are doing can you give me any reference of what it's doing @vighnesh153 — SHERAWAT LOKESH, Nov 02 '22 at 04:37
Did you checkout the linked stackoverflow question? It explains the issue. You can also [check this out](https://stackoverflow.com/questions/33973648/react-this-is-undefined-inside-a-component-function). — vighnesh153, Nov 02 '22 at 07:30

score 0 · Answer 1 · answered Nov 02 '22 at 08:24

because you should pass your states as value to your inputs:

<input className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
       type="text"
       value={this.state.SignInuserName}
       name="user-name"
       id="user-name"
       onChange={this.onUsernameChange}
                />

<input className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
       type="password"
       value={this.state.SignInPassword}
       name="password"
       id="password"
       onChange={this.onPasswordChange}
                />

Uncaught TypeError: Cannot read properties of undefined (reading 'setState')

1 Answers1