title: React-bootstrap (BS v3) - can not use a ref from an input
body: <p>I’m using react-bootstrap, but with bootstrap v3, because that’s the bootstrap version my project currently uses.</p>
  <p>Now, I just need to have a <em>ref</em> from an <em>input</em>. In the react-bootstrap docs, it says you should use formControl’s <em>inputRef</em> property like this:</p>
  <pre><code>&lt;FormControl inputRef={ref =&gt; { this.input = ref; }} /&gt;
  </code></pre>
  <p>But currently, I’m using a function and react hooks to build my component, instead of classes.
  So I just wrote my code this way:</p>
  <pre><code>let inputReferencia = useRef(null);
  </code></pre>
  <p>In <em>onFocus</em> event, I use this statement to select the content of the input:</p>
  <pre><code>inputReferencia.current.select();
  </code></pre>
  <p>And, finally, this is my input, as per react-bootstrap syntax:</p>
  <pre><code>&lt;FormGroup&gt;
      &lt;FieldGroup
          id=&quot;referencia&quot;
          name=&quot;referencia&quot;
          value={formValues.referencia}
          type=&quot;text&quot;
          label=&quot;Referencia&quot; 
          onFocus={(e) =&gt; onDescripcionReferenciaInputFocus(e)}
          onChange={(e) =&gt; onInputChange(e)} 
          inputRef={ref =&gt; { inputReferencia = ref; }} /&gt;
  &lt;/FormGroup&gt;
  </code></pre>
  <p>As React-bootstrap suggests, this is <em>FieldGroup</em>:</p>
  <pre><code>const FieldGroup = ({ id, label, help, ...props }) =&gt; {
      return (
          &lt;FormGroup controlId={id} bsSize=&quot;small&quot;&gt;
              &lt;ControlLabel&gt;{label}&lt;/ControlLabel&gt;
              &lt;FormControl {...props} /&gt;
              {help &amp;&amp; &lt;HelpBlock&gt;{help}&lt;/HelpBlock&gt;}
          &lt;/FormGroup&gt;
      );
  }
  </code></pre>
  <p>But when I try to access the <em>ref</em>, as in</p>
  <pre><code>inputReferencia.current.select()
  </code></pre>
  <p>the <em>current</em> property is undefined.
  Of course, if I check out the ref in Chrome debugger, it was definitely initialized with something:</p>
  <p><a href="https://i.stack.imgur.com/JOn7S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JOn7S.png" alt="react's ref in chrome debugger" /></a></p>
  <p>Can somebody help me to solve this issue?</p>
  <p>Many thanks for your help …</p>