React-bootstrap (BS v3) - can not use a ref from an input - react-bootstrap

Question

I’m using react-bootstrap, but with bootstrap v3, because that’s the bootstrap version my project currently uses.
Now, I just need to have a ref from an input. In the react-bootstrap docs, it says you should use formControl’s inputRef property like this:
<FormControl inputRef={ref => { this.input = ref; }} />
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:
let inputReferencia = useRef(null);
In onFocus event, I use this statement to select the content of the input:
inputReferencia.current.select();
And, finally, this is my input, as per react-bootstrap syntax:
<FormGroup>
<FieldGroup
id="referencia"
name="referencia"
value={formValues.referencia}
type="text"
label="Referencia"
onFocus={(e) => onDescripcionReferenciaInputFocus(e)}
onChange={(e) => onInputChange(e)}
inputRef={ref => { inputReferencia = ref; }} />
</FormGroup>
As React-bootstrap suggests, this is FieldGroup:
const FieldGroup = ({ id, label, help, ...props }) => {
return (
<FormGroup controlId={id} bsSize="small">
<ControlLabel>{label}</ControlLabel>
<FormControl {...props} />
{help && <HelpBlock>{help}</HelpBlock>}
</FormGroup>
);
}
But when I try to access the ref, as in
inputReferencia.current.select()
the current property is undefined.
Of course, if I check out the ref in Chrome debugger, it was definitely initialized with something:
Can somebody help me to solve this issue?
Many thanks for your help …

Answer 1

According to the docs you ought to use ref instead of inputRef. This is regardless of whether you are using Bootstrap V3 or Bootstrap V4 or any other version as React-bootstrap only uses their stylesheet.
In dealing with functional components and trying to access the child element's ref on the parent when the ref variable is declared on the parent, you can opt to use forwardRef
function App() {
let inputReferencia = useRef(null);
function onDescripcionReferenciaInputFocus(e) {
console.log(`inputReferencia`, inputReferencia);
}
return (
<Container>
<FormGroup>
<FieldGroup
id="referencia"
name="referencia"
value={formValues.referencia}
type="text"
label="Referencia"
onFocus={(e) => onDescripcionReferenciaInputFocus(e)}
onChange={(e) => onInputChange(e)}
ref={inputReferencia}
/>
</FormGroup>
</Container>
);
}
const FieldGroup = React.forwardRef(({ id, label, help, ...props }, ref) => {
return (
<FormGroup controlId={id} bsSize="small">
<ControlLabel>{label}</ControlLabel>
<FormControl {...props} ref={ref} />
{help && <HelpBlock>{help}</HelpBlock>}
</FormGroup>
);
});