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.
In this code you are trying to have same state for two fields that's why your getting the same value.You should have two separate state values for two fields.

```
import React from "react";

class App extends React.Component {
  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});
  }

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

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

}

export default App;

```