Passing Refs to a Parent Component Using useRef in React.js

Hey guys! This is a short tutorial on how we can handle passing refs from a child component to a parent component. This comes in handy whenever you need to edit a DOM Node that isn't directly declared in your component.

Social Links:

New to the channel?

[adingeist]

Most straightforward explanation. I can tab between text input fields in my React Native app now thank you!

[reggiebryant]

Descriptive title. Outlines use cases in first minute. Simple, straightforward explanation and demonstration. Hours of searching through code forums replaced with a 7:49 minute video. This is the way all videos should be done.

[PatrickLemiuex]

I think the better approach to this problem is to use the forwardRef function, it allows you forward the ref to the component or the DOM element from the parent. For example: const comp = forwardRef( (props, ref) => <div ref={ref} />) you can do this from as big of a hierarchy as necessary...

[mikki]

Best explanation I've seen thus far on this subject. Thank you.

[eldenhor]

He needs to be given the Nobel Peace Prize! This tutorial saved me!

[alielmajdaoui]

5:42 you should keep it as `const` since what's changing is the `current` property of the ref variable not the variable itself.

[Feschmesser]

All of your videos are excellent content! Thanks!

[rofazayn]

So helpful, thank you.
Part 3 that you mentioned at the end of the video, have you got a chance to upload it?

[JakubJacobSobotka]

Is somewhere entire course? This is so good!

[UnDash]

Good one! Do you have an example of passing refs to multiple children, using "useRef"?

[luxgroove]

how can we pass multiple refs into one component?

[saurabrakshit]

Your vedio title is something & your explaination is something else . This will confuse the audience.
Your vedio title should be "Passing Refs from Parent Component to Child Component Using useRef in React.js"