How can I attach to a stateless component's ref in React?
<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>