title: How can I attach to a stateless component's ref in React?
body: <p>I am looking to create a stateless component who's <code>input</code> element can be validated by the parent component.</p>
  
  <p>In my example below, I am running into a problem where the input <code>ref</code> is never being assigned to the parent's private <code>_emailAddress</code> property.</p>
  
  <p>When <code>handleSubmit</code> is called, <code>this._emailAddress</code> is <code>undefined</code>. Is there something I'm missing, or is there a better way to do this?</p>
  
  <pre><code>interface FormTestState {
      errors: string;
  }
  
  class FormTest extends React.Component&lt;void, FormTestState&gt; {
      componentWillMount() {
          this.setState({ errors: '' });
      }
  
      render(): JSX.Element {
          return (
              &lt;main role='main' className='about_us'&gt;             
                  &lt;form onSubmit={this._handleSubmit.bind(this)}&gt;
                      &lt;TextInput 
                          label='email'
                          inputName='txtInput'
                          ariaLabel='email'
                          validation={this.state.errors}
                          ref={r =&gt; this._emailAddress = r}
                      /&gt;
  
                      &lt;button type='submit'&gt;submit&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/main&gt;
          );
      }
  
      private _emailAddress: HTMLInputElement;
  
      private _handleSubmit(event: Event): void {
          event.preventDefault();
          // this._emailAddress is undefined
          if (!Validators.isEmail(this._emailAddress.value)) {
              this.setState({ errors: 'Please enter an email address.' });
          } else {
              this.setState({ errors: 'All Good.' });
          }
      }
  }
  
  const TextInput = ({ label, inputName, ariaLabel, validation, ref }: { label: string; inputName: string; ariaLabel: string; validation?: string; ref: (ref: HTMLInputElement) =&gt; void }) =&gt; (
      &lt;div&gt;
          &lt;label htmlFor='txt_register_first_name'&gt;
              { label }
          &lt;/label&gt;
  
          &lt;input type='text' id={inputName} name={inputName} className='input ' aria-label={ariaLabel} ref={ref} /&gt;
  
          &lt;div className='input_validation'&gt;
              &lt;span&gt;{validation}&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  );
  </code></pre>