title: Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
body: <p>I'm trying to create a sign up form with an input for a users address. The address input uses the google autocomplete address api.</p>
  <p>I'd like to be able to keep it as a <code>Formik</code> field, so I can use <code>Yup</code> validation on it.</p>
  <p>The address input component looks like</p>
  <pre><code>// Google.jsx
  import React from &quot;react&quot;;
  import { Formik, Form, Field, ErrorMessage } from &quot;formik&quot;;
  /* global google */
  
  
  class SearchBar extends React.Component {
    constructor(props) {
      super(props);
      this.autocompleteInput = React.createRef();
      this.autocomplete = null;
      this.handlePlaceChanged = this.handlePlaceChanged.bind(this);
    }
  
    componentDidMount() {
      this.autocomplete = new google.maps.places.Autocomplete(this.autocompleteInput.current,
          {&quot;types&quot;: [&quot;address&quot;]});
      this.autocomplete.addListener('place_changed', this.handlePlaceChanged);
    }
  
  
    handlePlaceChanged(){
      const place = this.autocomplete.getPlace();
      console.log(place);
  
    }
  
    render() {
      return (
          &lt;Field ref={this.autocompleteInput}  id=&quot;autocomplete&quot; type=&quot;text&quot; name=&quot;address&quot; placeholder=&quot;&quot; /&gt;
      );
    }
  }
  
  
  export default SearchBar;
  
  </code></pre>
  <p>And my <code>Form</code> component looks like:</p>
  <pre><code>import React from &quot;react&quot;;
  import { Formik, Form, Field, ErrorMessage } from &quot;formik&quot;;
  import * as Yup from &quot;yup&quot;;
  import SearchBar from &quot;./Google&quot;;
  
  
  const LoginSchema = Yup.object().shape({
    fName: Yup.string().required(&quot;Please enter your first name&quot;),
    address: Yup.string().required(&quot;invalid address&quot;),
  });
  
  class Basic extends React.Component {
    render() {
      return (
        &lt;div className=&quot;container&quot;&gt;
          &lt;div className=&quot;row&quot;&gt;
            &lt;div className=&quot;col-lg-12&quot;&gt;
              &lt;Formik
                initialValues={{
                  fName: &quot;&quot;,
                  postal: &quot;&quot;,
                }}
                validationSchema={LoginSchema}
                onSubmit={(values) =&gt; {
                  console.log(values);
                  console.log(&quot;form submitted&quot;);
                }}
              &gt;
                {({ touched, errors, isSubmitting, values }) =&gt;
                  !isSubmitting ? (
                    &lt;div&gt;
                      &lt;div className=&quot;row mb-5&quot;&gt;
                        &lt;div className=&quot;col-lg-12 text-center&quot;&gt;
                          &lt;h1 className=&quot;mt-5&quot;&gt;LoKnow Form&lt;/h1&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;Form&gt;
  
                        &lt;div className=&quot;form-group&quot;&gt;
                          &lt;label htmlFor=&quot;fName&quot;&gt;First Name&lt;/label&gt;
                          &lt;Field
                            type=&quot;text&quot;
                            name=&quot;fName&quot;
                            className={`mt-2 form-control
                      ${touched.fName &amp;&amp; errors.fName ? &quot;is-invalid&quot; : &quot;&quot;}`}
                          /&gt;
  
                          &lt;ErrorMessage
                            component=&quot;div&quot;
                            name=&quot;fName&quot;
                            className=&quot;invalid-feedback&quot;
                          /&gt;
                        &lt;/div&gt;
  
                        &lt;div className=&quot;form-group&quot;&gt;
                          &lt;label htmlFor=&quot;address&quot;&gt;Address&lt;/label&gt;
  
                          &lt;Field name=&quot;address&quot; component={SearchBar} placeholder=&quot;&quot; /&gt;
  
                          &lt;ErrorMessage
                            component=&quot;div&quot;
                            name=&quot;address&quot;
                            className=&quot;invalid-feedback&quot;
                          /&gt;
  
                        &lt;/div&gt;
  
  
  
                        &lt;button
                          type=&quot;submit&quot;
                          className=&quot;btn btn-primary btn-block mt-4&quot;
                        &gt;
                          Submit
                        &lt;/button&gt;
                      &lt;/Form&gt;
                    &lt;/div&gt;
                  ) : (
                    &lt;div&gt;
                      &lt;h1 className=&quot;p-3 mt-5&quot;&gt;Form Submitted&lt;/h1&gt;
  
                      &lt;div className=&quot;alert alert-success mt-3&quot;&gt;
                        Thank for your connecting with us.
                      &lt;/div&gt;
                    &lt;/div&gt;
                  )
                }
              &lt;/Formik&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Basic;
  
  </code></pre>
  <p>This returns an error of &quot;Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?&quot;.</p>
  <p>Which is coming from my address input component at:</p>
  <pre><code>&lt;Field ref={this.autocompleteInput}  id=&quot;autocomplete&quot; type=&quot;text&quot; name=&quot;address&quot; placeholder=&quot;&quot; /&gt;
  </code></pre>
  <p>Everything else is working, I just need to get past this last hurdle and I'll be good from here.</p>
  <p>I will begin looking into the docs, but I'm unfortunately in a rush to get this done so I figured I'd try my luck here!</p>
  <p>Any help is greatly appreciated! Thank you!</p>