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.
Okay to clarify this I would illustrate this using vanilla JavaScript.
See the Pen Focus in Vanilla JavaScript by Samson Amaugo (@Sammy360) on CodePen.
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
See the Pen Using Refs by Samson Amaugo (@Sammy360) on CodePen.
From the example above you can see how we accomplished the same function in both React and Vanilla JavaScript.
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
