React- Forwarding Refs

Yo guys I’m back and banging today with using React’s forwarding Technique.

Since React paradigm is based on components and its encapsulations with other components, sometimes you might want to gain access to the node of a child element in a parent element.

In the example above you can see that a ref was created. But the problem with the code above is that you can’t reach the button element in the SmileyButton’s component. So to make this work we are going to make use of the forwardRef procedure.

You need ref forwarding to allow a component to pass refs to their parent-child. An example can be seen below.

If you run the code above you would notice that you have access to the ref of the button. And therefore you can control it from its ancestral parents.

React.forward Refs receives two arguments: props and ref

Please note that the ref’s argument of React forward won’t work on regular functions and class components.

You can read up more on refs to increase your knowledge span.

Thanks guys… You can comment below to contribute