ReactJS Tutorial - 30 - Forwarding Refs

One doubt sir. You said one point here that ref.current points to the native input element and not the FRInput component instance. what is an instance? where it is located?

What if I have a multiple input element in child component and i have to pass multiple ref from parent to child to assign, in that case how can we pass multiple refs using forwadingRef function

Thanks

what else can be done with refs? instead of focus...

Forwarding Refs: (- referencing childComponents and accessing child elements)
Automatically forwarding a ref to child components
In above method, instead of referencing a child component, here we will directly reference the child’s input element.
Steps:
1. create reference variable in parent
2. attach to child component, when calling it.
React.forwardRef()
This takes “component” as input. So entire function goes into the parameter.
use arrow function for the component.
Every functional component takes ‘props’ as parameter.
But, when component is passed as parameter to createRef method, it will take ‘ref’ as 2nd parameter.
Thus ref is being forwarded from parent to child element.
3. Forward the ref to child’s input element
4. call focus directly now, from parent ref and current.
5. nothing else in child, except 3rd step

marvelous

What happens if we have more than one refs ?

Can we forward refs for Class type components?

Please use only functional components
If you mix up with class component it is little bit confusing

Super interesting. Thanks for the explanation. Super clear.

refs cannot be passed as regular props. this is from the official react docs. "ref is not a prop. Like key, it’s handled differently by React. If you add a ref to a HOC (higher order component), the ref will refer to the outermost container component, not the wrapped component." this is why we need to use React.forwardRef()

All good, but just cannot digest your accent. Sorry...

Thanks, man you saved my life and time. I was facing a problem and you helped me to fix it.

What if there is more than one input how to handle it? Whether need to pass form ref and use it?

How to forward multiple refs?

How I can forward multiple input ref using above example.?

This video helped me a lot. Thank you

Hello I am little bit confused so what I understand that if the relationship between functional component and class based component we cannot do as previous video because you didn't use forward refs and you were able to access a function inside the child component using the refs but in here you're doing all of this to be able to make relationship between functional and class based components am I right or I got the idea wrongly?

Disliked it. long video stretched it and speaks tons of random gibberish. not to the point!

Amazing Video

Very clear ty

why mixing functional and class components? is it necessary?

Mind blowing explanation with great n clear voice 👌

Isn't there something like forwardRef we can use for class Components

Let suppose we have 5 inputs and we need to assign ref on every input tag how do we do that

what if i have multiple refs, how can i handle this

That's native input can you put it on a react component

WHY YOU ARE NOT EXPLAINING US WHY YOU USE FUNCTIONAL COMPONENT AND CLASS COMPENT IN THE CERTAIN EXAMPLE? YOU ARE GOOD DONT TREAT THAT COMMENT BAD. AND WHEN TO USE FUNCTIONAL OR CLASS COMPONENT?

So forwarding refs can be used when the child component is functional component ?

can we use jquery for this purpose? or its not a good approach to use jquery with react??

Can i access ref from class component using this.props.ref and get the same effect ??

Why can't we directly pass the ref as props?

This is a great material to learn, but I have got a question. Is it possible to use forwadRef with class components?

how can we pass multiple refs into one component? And how could we change their name when being passed so they are not all just called ref?

Can we not pass down the ref instance as prop to the child component and then the child can assign the instance to whichever element it wants?

Nice vedio and clear concept ..if you add with class component also ..so we can differentiate with functional component

Thank you this helped greatly. REALLY NICE!!!

its work when use <input></input>
but when i use "reactstrap" it doesnot work. <Input />
please solve this problem

finaly i got it, thank you

Adds another layer in between parent and child what then? forwardRef() twice?

thanks for the gr8 explanation

I program in react and i don't know about this topics . Thanks 👍

It's funny how each video in these series have less viewers and all these people screaming how they love you are gone. Awesome work 🙃

How can I call a method of child component from parent using ref

What if one sends different refs to the component from different calling of the component

For anyone who is confused between the previous video and this, let me break it down for you.
'ref 'in React is basically used to access HTML nodes, in the previous we learned that refs can also be used to access components in React, in a similar way we did the HTML element.
In this video we referenced the Child Component as well, but then we used React.forwardRef() to forward the reference from the child component to the input element inside the component.
Thus we were directly able to access the focus() method of <input> tag directly in our Parent Component via this.inputRef.current.focus(). if we would'nt have forwarded the ref we could'nt have accessed it directly via the current object.

Superb.

most useful tutorial. it would be great if each video has link to code explained in it.