Hey guys I’m back and banging and in today’s post we gonna be talking about React Refs..
Refs can be seen as a way of making reference to a DOM node or component. In react the gateway of interaction between a parent and child component is usually with the use of props. But sometimes we may need to interact with a component or an element that is outside the normal data flow and that is when Refs come in view.
There are some important uses of ref but in this article but we would demonstrate using ref’s to activate the focus of an input element.
In the example above you can see that when the Button is clicked the input field gains focus.
Now let us try this out with React Ref
One thing to note from the React implementation is that to use the ref we had to assign a variable to the React.createRef() API. This method would form the connection in the node where the ref prop is assigned.
Also note that ref are not usually used in functional component because they don’t have instances.
You also don’t need to make use of the React.createRef() API always as we can make use of the callback implementation. In the next lesson we would discuss how to use the callback method.
If you have any question …please don’t fail to put it down in the comment section below