title: React passing value through state on handle change
body: <p>I am attempting to use two methods, handleChange and handleSubmit for a login page in react. I have tried to set two values for username and password within state, update the values in state whenever the input are of the form is modified, then submit using the values stored in state. However, my values return undefined when printed to console. (p.s. I am aware I still yet need to encrypt password for all you security gurus).</p>
  
  <p>I'm new to react so there may be an issue with my logic:</p>
  
  <p>Login.js</p>
  
  <pre><code>export default class Login extends React.Component {
  
  constructor(props) {
      super(props);
      this.state = {uname: '', password: ''};
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleChange(event) {
      this.setState({uname: event.target.uname, password: event.target.password});
  }
  
  handleSubmit(event) {
      alert('A username and password  was submitted: ' + this.state.uname + this.state.password);
      event.preventDefault();
  
      fetch('https://localhost:8080/login', {
          method: 'POST',
          headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
          },
          body: JSON.stringify({
              uname: this.state.uname,
              password: this.state.password,
          })
      });
  }
  
  render() {
  
      return (
          &lt;div&gt;
              &lt;Header titleName={"Login"}&gt;
                  &lt;div className="container"&gt;
                      &lt;div className="card"/&gt;
                      &lt;div className="card"&gt;
                          &lt;h1 className="title"&gt;Login&lt;/h1&gt;
                          &lt;form onSubmit={this.handleSubmit}&gt;
                              &lt;div className="input-container"&gt;
                                  &lt;input name="uname" type="text" value={this.state.uname} id="#uname" required="required"
                                          onChange={this.handleChange}/&gt;
                                  &lt;label form="#unamelabel"&gt;Username&lt;/label&gt;
                                  &lt;div className="bar"/&gt;
                              &lt;/div&gt;
                              &lt;div className="input-container"&gt;
                                  &lt;input name="password" type="password" value={this.state.password} id="#pass" required="required"
                                         onChange={this.handleChange}/&gt;
                                  &lt;label form="#passlabel"&gt;Password&lt;/label&gt;
                                  &lt;div className="bar"/&gt;
                              &lt;/div&gt;
                              &lt;div className="button-container"&gt;
                                  &lt;button type="submit" value="Submit"&gt;&lt;span&gt;Go&lt;/span&gt;&lt;/button&gt;
                              &lt;/div&gt;
                              &lt;div className="footer"&gt;&lt;a href="#"&gt;Forgot your password?&lt;/a&gt;&lt;/div&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/Header&gt;
              &lt;Footer/&gt;
          &lt;/div&gt;
      );
  }
  }
  </code></pre>