ReactJS Tutorial - 29 - Refs with Class Components

📱 Follow Codevolution

Refs make it possible to access DOM nodes directly within React.

[raviprajapati]

Nice tutorials. my favorite part in every video " and i will get rid of the name export "

[matteol]

Bro, your videos are way better than the official and verbose documentation.
Keep it up!

[vigneshgvs]

Refs To class component: (- referencing childComponents and accessing child methods)
Actually it is clicking a child component button - make an input element in child component to receive focus. But code flow has to start/go from parent.
1. So 2 reference variables of Ref is created - in parent & child.
2. in parent, Attach parent ref variable to child component, while calling it.
3. in child, Attach child ref variable to child’s input element. (normal)
4. in parent, on click of a button, call a method of parent itself which sets ‘current’ to ‘focus()’ to call child method…..
(calling child component methods – by referencing/attaching childComponents and using ‘current’).
5. now in child, that called method – will set its current to focus. (normal)

[shvideo]

Concise and very well explained. Great tip to know. Thank you. You're a great teacher.

[Ahmed-fqkz]

you literally made the child component act like normal HTML tag. Well Played 👏

[johannesalmroth]

Clean, clear & concise. Thank you!

[shivamsurve]

great work vikas!!! been following your videos right from html !helped me a lot

[nishantnimish]

We can create ref in FUNCTIONAL COMPONENTS by useRef() hook

[spacepacehut]

If anyone might be having a doubt as mine on the creation of a new Ref in parent component.

As we pass the parent ref to a child component then an instance of the child component can be accessed by using "" this.parentRef.current "" and so it is created to call the clickHandler of child component from

[AAKSHAS]

3:33 Lets bookmark that It's Input component ! It's NOT Input Element !!

[KingKhan-bikb]

I have a doubt, why there is a need for create ref in parent class when it's there in child. And the refs that is send in child class is where used in child class. In child class it has it own reference?

[salaramirahmadi]

Amazing and simple explanation, thanks

[movieland]

Thank you. You are awesome. Great explained

[neahnderthal]

Is it just a React thing for the parent component ref to have access to the child ref focusInput() child component method/focus() ref method?

[milhod]

Love your work ! Thank you for this tutorial really useful and easy to understand.
However, I have a silly question : You explained in the end that it is possible to use ref to a Child Component from a Parent Component. And it is possible only if the component is a class component. Which one? The child component or the parent component ? I think, both of them, but I'm not sure.
I wish you the best and I will continue to follow your work. Take care !

[ahuimonty]

thanks Vishwas, do you put the code that you used for demo in Github? i wanted to follow and practice. thanks

[garrysohi]

Is the ref created in Input component useless? Because we are not calling the focusInput method and we are using the ref of parent only to focus.
===
Edit: ok so we access the child methods in the parent itself using refs!

[JoshuaNalusOfficial]

it worked to me by calling the function from the Input file or child file

[panagiotis]

Well done for the video series, just a question, what is the benefit of focus using React with two files, rather that pure JavasScript with just a line or two of coding? This is a general question, since everything can be done with JavaScript / jQuery why use React? Just asking.

[shloch]

i get an error
"TypeError: is not a function"
when i click on button (on browser)