title: Sending data from a form to the parent component in ReactJS
body: <p>I have this <code>AddUser</code> component which which is a simple componnet that gets an email address, and a role from dropdownlist and then passes these two values to the parent component. Everything works fine other than one thing: if I first enter the email address and then choose the role it <code>onChange()</code> doesn't get the value from dropdownlist and pass null to the parent component. But if I first choose role and then enter the email, <code>onChange()</code> gets both values! How can I fix it?</p>
  
  <p>This component has 3 props: <code>roles</code> is a dictionary and I'm creating <code>rolesList</code>from it to use it as data for <code>DropdownList</code> (it's from <code>react-widget</code>, <a href="https://jquense.github.io/react-widgets/docs/#/?_k=3fo3eq" rel="nofollow noreferrer">https://jquense.github.io/react-widgets/docs/#/?_k=3fo3eq</a>). The second prop is <code>handleChange()</code> that set the states of the parent component. the 3th one is<code>handleAddNewUser()</code> that returns the values from form to the parent component. </p>
  
  <pre><code>export const AddUser = React.createClass({
      getInitialState() {
          return {
              email: "",
              selectedRole: "",
          };
      },
  
      onChange() {
          var email = this.email.value;
          this.props.handleChange(email, this.state.selectedRole); 
      }, 
  
      render() {
          var rolesList = [];
          for(var key in this.props.roles){
              rolesList.push(key);
          }
          return(
              &lt;div &gt;
                  &lt;form onSubmit={this.props.handleAddNewUser}&gt;
                      &lt;label &gt;New user email address:&lt;/label&gt;
                      &lt;input ref={(ref) =&gt; this.email = ref} name='email'  type='email' onChange={this.onChange}  required /&gt;
                      &lt;label &gt;Choose a role for new user:&lt;/label&gt;
                      &lt;DropdownList data={rolesList} value={this.state.selectedRole} name='rolesList' onChange={selectedRole =&gt; this.setState({ selectedRole })} /&gt; 
                      &lt;button type="submit" &gt;Add user&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      },
  });
  </code></pre>
  
  <p>UPDATE: this is the code from parent component, <code>handleChange()</code> sets the states for parent component. <code>handleAddNewUser()</code> is supposed to use the states and make an ajax request to create new user. Right now it gets value for <code>newUserEmail</code> but not the <code>newUserRole</code></p>
  
  <pre><code>handleChange(email, selectedRole){
      this.setState({newUserEmail: email})
      this.setState({newUserRole: selectedRole})
  },
  
  handleAddNewUser(e) {
      e.preventDefault();
      // using its state, it supposed to make an ajax request and create a new user
      }
  </code></pre>