Material-ui setting state values in form component not working

Question

I am trying to create a new Login component using Material-ui. I have two state variables 'username' and 'password'. When I fill textfields and submit it, the state values are not available inside my submitForm function.

My code is:

class Login extends React.Component {

constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
    };
  }


submitForm(e) {
  e.preventDefault();
   console.log('test');
   console.log(this.state.username.trim());
   console.log(this.state.password.trim());

  };

render() {

    return (
     <form className="commentForm">
    <TextField
      value={this.state.username}
      onChange={e => this.setState({ username: e.target.value })}
      hintText = "username" style={textfieldStyles.margin}

    />
    <TextField
      value={this.state.password}
      onChange={e => this.setState({ password: e.target.value })}
      hintText = "password" type="password"

    />
         <IconButton iconStyle={{iconHoverColor: '#55ff55'}}
     tooltip="Sing In" key='signin-button' 
     // onTouchTap={this.handleTouchTap}
     onClick={this.submitForm}
     >
    <ArrowIcon color={Colors.cyan500} style={{marginTop: 30}} hoverColor={hoverColor} />
    </IconButton>
  </form>
    );
  }
}

export default Login;

The console output console.log('test'); is working but

console.log(this.state.username.trim());
console.log(this.state.password.trim());

not giving any output.

Did I miss something to set state variables? or I need to include other things to make it working?

slugo · Accepted Answer · 2016-08-26 13:53:34Z

1

Because you're using ES6 class syntax, you should be binding this for your class methods, in this case your submitForm method.

https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

constructor(props) {
  super(props);
  this.submitForm = this.submitForm.bind(this);
  ...
}

Otherwise you won't be able to access this.state inside submitForm.

answered Aug 26, 2016 at 13:53

slugo

1,0392 gold badges11 silver badges23 bronze badges

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

2 Comments

Sijan Bhandari Over a year ago

I think this is the best way. I used

<IconButton iconStyle={{iconHoverColor: '#55ff55'}}      tooltip="Sing In" key='signin-button'       // onTouchTap={this.handleTouchTap}      onClick={this.submitForm.bind(this)}      >

I bind the component while clicking the button as 'this.submitForm.bind(this)'. But I think this is a hard way. Thanks.

keul Over a year ago

Binding during the render execution is not good for performance

Collectives™ on Stack Overflow

Material-ui setting state values in form component not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related