In my parent component constructor (class based), I add a ref for an input field by using:
this.usernameRef = React.createRef();
This works just fine in the parent component. For example, the following works fine:
const username = this.usernameRef.current.value; // this works
I'm passing .focus() call to the ref into a child component like so:
<ChildComponent
onClick={() => this.usernameRef.current.focus()}
/>
In my child component, it gets called with an onClick event:
<a href="#" onClick={onClick} />
While the app is running, when I click on that link, I get the following error:
e.usernameRef.current.focus is not a function
Should I be going about this a different way?
For what it's worth, the child component is function based.
Thanks