Question: I have a simple react application with two fields - one for email and one for password. Currently when I type something in email field, the password field also is populated. I want to separate those fields and when the user types email and password and hits "login", he should see both values, currently he sees one. Here's my code snippet:

```
import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

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

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

  handleSubmit(event) {
    alert('email: ' + this.state.value);
    alert('password: + ?');
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          email:
          <input type="text" name="email" value={this.state.value} onChange={this.handleChange} />
        </label>
        <label>
          password:
          <input type="password" name="password" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Login" />
      </form>
    );
  }

}

export default App;

```

Do you have any hints what is wrong in my code? thanks!

Answer: 
```
import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

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

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

  handleSubmit(event) {
    alert('email: ' + this.state.email);
    alert('password: + this.state.password);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          email:
          <input type="text" name="email" value={this.state.email} onChange={e=>this.handleChange(e)} />
        </label>
        <label>
          password:
          <input type="password" name="password" value={this.state.password} onChange={e=>this.handleChange(e)} />
        </label>
        <input type="submit" value="Login" />
      </form>
    );
  }

}

export default App;

```

You are assigning both of them to value and hence you don't see the difference.
You need to add two states, one for the email and one for the password and then you can do something like this on you handleChange function:

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

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

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

```

After that you just need to change the input fields to use that piece of state:

```
<input type="text" name="email" value={this.state.email} onChange={this.handleChange} />
<input type="password" name="password" value={this.state.password} onChange={this.handleChange} />

```