title: React unable to set two way binding
body: <p>Here are my two components. I just need to update my state in the login component. I am not sure what I am doing wrong here. I am trying to pass the data on change to the login component. The data is getting captured in e.target.value for each character, but then it resets the state.</p>
  
  <p>I have tried to move the userObj inside the state as well,but does not work</p>
  
  <pre><code>    import React, { Component } from 'react';
      import FormHeader from './FormHeader'
  
      class NonLoggenInForm extends Component {
          render() {
  
              return (
                  &lt;div className="marginTop1 formPanel"&gt;
                      &lt;FormHeader label={this.props.label}/&gt;
                          {this.props.content.map((key)=&gt;{
                              return &lt;input type={key.type} 
                                           value = {key.value} 
                                           placeholder = {key.name}
                                           required = {key.required}
                                           onChange = {e=&gt;this.props.onChange(e)}
                                           className = "formInput"
                                           name = {key.name}
                                           key = {key.id}
                                           /&gt;;
                                          })}
  
                          &lt;button  onClick={this.props.onSubmit}&gt; Sign in&lt;/button&gt; 
  
                  &lt;/div&gt;
  
              );
  
          }
  
        }
  
        export default NonLoggenInForm;
  
  
  import React, { Component } from 'react';
  import Logo from '../shared/Logo';
  import NonLoggenInForm from '../shared/NonLoggenInForm';
  
  class Login extends Component {
  
      changeHandler = (e) =&gt; {
          console.log(e.target.value);
          this.setState({
              [e.target.name] : e.target.value
          });
      }
      loginHandler = (e) =&gt; {
          e.preventDefault();
          console.log(this.state);
      }
  
      render() {
         let  userObj = [
              {
                  name : 'userId',
                  type: 'text',
                  required: true,
                  value : '',
                  id : 1
  
              },
              {
                  name : 'password',
                  type : 'password',
                  required : true,
                  value : '',
                  id : 2
  
              }
          ];
      return (
              &lt;div className="nonLoggedInPages"&gt;
                  &lt;Logo/&gt;
                  &lt;NonLoggenInForm content={userObj} label="Sign in" onSubmit={this.loginHandler} onChange={this.changeHandler}/&gt;
              &lt;/div&gt;
  
          );
  
      }
  
    }
  
    export default Login;
  </code></pre>