React passing value through state on handle change

Question

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).

I'm new to react so there may be an issue with my logic:

Login.js

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 (
        <div>
            <Header titleName={"Login"}>
                <div className="container">
                    <div className="card"/>
                    <div className="card">
                        <h1 className="title">Login</h1>
                        <form onSubmit={this.handleSubmit}>
                            <div className="input-container">
                                <input name="uname" type="text" value={this.state.uname} id="#uname" required="required"
                                        onChange={this.handleChange}/>
                                <label form="#unamelabel">Username</label>
                                <div className="bar"/>
                            </div>
                            <div className="input-container">
                                <input name="password" type="password" value={this.state.password} id="#pass" required="required"
                                       onChange={this.handleChange}/>
                                <label form="#passlabel">Password</label>
                                <div className="bar"/>
                            </div>
                            <div className="button-container">
                                <button type="submit" value="Submit"><span>Go</span></button>
                            </div>
                            <div className="footer"><a href="#">Forgot your password?</a></div>
                        </form>
                    </div>
                </div>
            </Header>
            <Footer/>
        </div>
    );
}
}

Solution 1

Replace handle change with this

handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

You need to set value of the inputs to the state, not the name of the inputs

Solution 2

I think the handleChange should setState should have event.tagert.name = event.target.value:

 handleChange(evt) {
    this.setState({
      [evt.target.name]: evt.target.value,
    });
  }

Solution 3

The problem lies with handleChange function. In the code posted above, there are two distinct 'event' objects associated with the two form inputs. Each one of them have their own set of properties. For example: 'event.target.name' stores the 'name' attribute specified by 'input' tag while 'event.target.value' stores the data entered by the user. So, change the implementation of handleChange to either

(A) Verbose

handleChange(event) {
     if (event.target.name == "uname") {
              this.setState({
                uname: event.target.value
              });
            }
      if (event.target.name == "password") {
              this.setState({
                password: event.target.value
              });
            }
    }

where you can match the 'name' attribute to either uname or password and set state accordingly.

(B) Succinct

  handleChange(event) {
    this.setState({
        [event.target.name]: event.target.value
    });
}

Solution 4

If you want to get the value of an input inside a react statefull component, you should set the ref property of this input like this:

<input name="username" ref={node => this.username = node} />

then calling this.username will return you the actual value of username input.

You don't want to set the state in a submit action since this makes your component rerender each times a letter push your input value.

More in the react doc

View more solutions