title: React - Can A Child Component Send Value Back To Parent Form
body: <p>The <code>InputField</code> &amp; <code>Button</code> are custom components that go into a form to create a form. My issue is how do I send the data back up to form so that on button click, I can fire ajax on the form with data (username &amp; password):</p>
  
  <pre><code>export default auth.authApi(
    class SignUpViaEmail extends Component{
  
      constructor(props){
        super(props);
        this.state = {
          email : "",
          password : ""
        };
        this.storeEmail = this.storeEmail.bind( this );
        this.storePassword = this.storePassword.bind( this );
      }
  
      storeEmail(e){
        this.setState({ email : e.target.value });
      }
  
      storePassword(e){
        this.setState({ password : e.target.value });
      }
  
      handleSignUp(){
        this.props.handleSignUp(this.state);
      }
  
      render(){
        return(
          &lt;div className="pageContainer"&gt;
  
            &lt;form action="" method="post"&gt;
              &lt;InputField labelClass = "label"
                          labelText = "Username"
                          inputId = "signUp_username"
                          inputType = "email"
                          inputPlaceholder = "registered email"
                          inputClass = "input" /&gt;
              &lt;Button btnClass = "btnClass"
                      btnLabel = "Submit"
                      onClickEvent = { handleSignUp } /&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        );
      }
  
    }
  );
  </code></pre>
  
  <p>Or Is it not recommended &amp; I should not create custom child components within the form?</p>
  
  <p>child component => <code>InputField</code></p>
  
  <pre><code>import React,
         { Component } from "react";
  
  export class InputField extends Component{
  
    constructor( props ){
      super( props );
      this.state = {
        value : ""
      };
      this.onUserInput = this.onUserInput.bind( this );
    }
  
    onUserInput( e ){
      this.setState({ value : e.target.value });
      this.props.storeInParentState({[ this.props.inputType ] : e.target.value });
    }
  
    render(){
      return  &lt;div className = ""&gt;
                &lt;label htmlFor = {this.props.inputId}
                       className = {this.props.labelClass}&gt;
                  {this.props.labelText}
                &lt;/label&gt;
                &lt;input id = {this.props.inputId}
                       type = {this.props.inputType}
                       onChange = {this.onUserInput} /&gt;
                &lt;span className = {this.props.validationClass}&gt;
                  { this.props.validationNotice }
                &lt;/span&gt;
              &lt;/div&gt;;
    }
  }
  </code></pre>
  
  <p><em>Error : I get the error <code>e.target is undefined</code> on the parent storeEmail func.</em> </p>