ReactJS Tutorial - 28 - Refs

[@vigneshgvs]

Refs To Input element: Ref - to make autofocus Steps: 1. Create ref - using React.creatRef() and assign it class variable - reference variable 2. attach to input element using “ref” attribute What above step does: makes the input element = ‘current’ property, in the class variable. 3. call focus() method on input element. - using the current property Types/ways: 1. React.createRef - uses “current” property - above 2. callback Ref - without “current” - below callback Ref: Steps: 1. create a property with null 2. on function click, call setter of that property and assign the ‘element’ 3. call focus method - directly from reference variable

[@iUmerFarooq]

You're the best teacher. Thank you for your great content and waiting for *NodeJs* Course.

[@lollilolli4582]

I will recommend your course to whoever wants to learn React!"! A lot of thank you!

[@anshulsinghla998]

Omg, I can literally pay any amount for such quality content. I hope you could do a series where you build a complete project using ReactJS + NodeJs.

[@pashish12345]

Very articulate , I have never seen such profound elaboration . Thanks a lot for such valuable content .

[@allansarion7118]

I like your videos because you provide summary at the end.

[@tuatkiep9702]

You're the best teacher. Thank you for your great content

[@Hermioneswand1]

You are an amazing teacher, thank you so much!! 🙏

[@marcofriso5922]

best explanation of React Ref that I found

[@milosleng1175]

i find this guide quite confusing, i am a beginner and I stopped watching at this point

[@prisinha]

2:05 second step is to attach ref to input element in render method

[@tejaswir9018]

Thanks!

[@minthep2611]

Using React.createRef Create ref: Use React.createRef(), assign to variable in component. Attach to input: Use ref property on input. Call focus(): Access input via current of ref, call focus(). Using Callback Ref Create property: Create property, initialize to null. Assign callback: In input's ref, pass callback function. Call focus(): In callback, save input to property, call focus() on it.

[@rajeevbhosle1580]

you are blessing to the all programmer

[@prisinha]

1:33 first step is to create ref

[@lightninginmyhands4878]

I looked up Vishwas and went into a Bollywood rabbit hole. Cheers

[@prisinha]

0:05 Refs help to access DOM nodes directly

[@RomanH91]

Why when I do ? console.log(this.inputRef) I can see the information about object console.log(this.cbRef) I can't see the information about object

[@yewteebell]

Why export was removed at 1:04?

[@vigneshtamizh4091]

functionality is working fine with adding the callback function outside of constructor......Is there any reason to add the callback function inside of constructor ?

[@subhashisz]

When class was loaded then constructor getting loaded by default, may be that was the reason.

[@mohamedboukhanouf]

Thank you codevolution👏

[@naireetyaneema7131]

Can someone explain to me that we can use the autoFocus attribute in the input tag to create a focus on the field? So why use Ref??

[@jreema]

We can use autoFocus property on the element right? Why do we need Refs?

[@motnahp008]

I'm with you J Reema. This is a lot easier: than using multiple lines of code with React.

[@saikumar2385]

I have a doubt, How is the this.cbRef in the IF function not null, when it's initialised to null?

[@lathagm666]

completed video 28. Thank you :-)

[@beneasmare8867]

the tutorials are very interesting and the way of expiration looks like what the instructor is amazing, thank you a lot sir. please send the document that helps me as I am a beginner

[@madhavilathaannamraju3656]

this.inputRef.current.focus() didn't work. I had the .js same as the example component. It still doesn't seem to work. I'm using React 16.7 version

[@yt-1161]

is there function-based component version of this example ?

[@MaheshKumar-qx8dy]

Great job, please keep doing Thank you very much 😊

[@prisinha]

4:00 how to fetch input value using ref

[@NiKNjPaTeL]

Question: can we attach ref to multiple elements? Will it give an error? If it will not give an error then what will be the output?

[@shubhamasija6338]

You can attach

[@PROTECHRAHUL]

Is ref used for input tags only

[@anjalimurali5619]

I have a dbt I have created the above classes and I put a console statement in every classes. But it is printing the console statement within withCounter class as first statemnt. Next showing the cosole in app js. Why this? Actually the first console. Should be in the app js right? So why the control initially goes to the withCounter js? Can somebody answer this?

[@LearnphpPhpforbeginners]

Nice. I have a question please answer this how we will perform click event handling without using onClick. mean i have to use this by ID or class like jquery

[@yateshchhabra9237]

How can we access the value of input tag using callback ref mechanism

[@jokeropbro9867]

Thankyou for such a great playlist 💝❤

[@musazahoor]

why my componentDidMount method is executing twice?

[@coolmind2476]

Is it possible to use useRef hook as well?

[@mareboinaravi5272]

2:52 --- componentDidMount life cycle hook what is that mean ??? anyone

[@beverlyHillsAgent]

What does the code compile even though you don't have semicolon on each line of your code?

[@amlanmishra6273]

it is optional in javascipt to use semicolon

[@prisinha]

2:32 third step is to call focus method on this input element

[@uttamakarapu7715]

Vishwas, what takes precedence if we use refs and implement click funcionality and also use Onclick on the same button ?

[@AjithKumar-sh1jx]

Let the property cbSet return null during the unmounting Phase. The componentDidMount won't be called at the unmounting phase anyway. Why we need that check then?

[@LeandroLuccerini]

Same question...

[@matteol1778]

Awesome tutorial. GG man!

[@ינוןאלבז-כ1ז]

Wow its amazing explanation and very valuable content!!! Thanks a lot

[@inkweonkim6299]

Thanks, This Video Great! I have a question. When I click button, how to get input.value in "this.setCbRef"???

[@keepanopenmindlookatallthe2540]

Is this available on functional components?

[@humasayyed213]

Really very useful. Thank you Sir..

[@rupeshmalhotra7695]

hi there, can we use ONCHANGE or any method on input while using refs?

[@flashfs]

I do think so

[@sonakshimishra.821]

There is no use of inputRef in callback ref approach, I guess.?

[@sqwale7]

Why are you decalring "setCbRef" in the constructor ? You could make it an ordinary method ? Is this good practice ?

[@PrakashBesra]

useRef in react hooks.

[@VishalSharma-rn7mt]

Great explanation

[@venkateshjonnakuti]

His sir may i know the shortcout code to write classcomponent. How to setup that(RFCE) from key board. Instead of writing everytime

[@naveen3046]

you need to install "simple react snippets" extension in visual studio then only you can use those shortcuts

[@arunlabana5937]

ES7 extensions from VS code extensions.

[@jayveeramone]

just curious, what's the difference of using createref() and just using autoFocus attribute?

[@tonmoyhussain6132]

You can do lot more with ref. As you can access all the input property

[@rohitsahu1443]

wonderful explaination Thanks alot

[@johannesalmroth8553]

Great tutorial! 👍

[@codezoom8637]

thanks for good way to illustrate this concept !

[@Aditya.Santra]

Very Helpful Video

[@mukulsharma7540]

This looks WRONG to me, where are we creating ref for this.cbRef? Like we did for this.inputRef = React.createRef?

[@kirankamath5891]

indside the callbackRef function , we are attaching ref with event

[@AAKSHAS]

8:28 Summary

[@namoan1216]

what snippet you are using?

[@naveen3046]

Simple React snippet

[@oleksandrsydorenko3303]

Tnx, man! Awesome explanation

[@TusharBorawake]

Hi, Can you please make video in which parent component can have access it's child component and grandchild component methods using refs. I was stuck in my real time project. Using react hooks and class component.

[@iUmerFarooq]

Are you found that problem?

[@phantazzor]

the same with hooks would be really appreciated !

[@helinchooi6741]

I love your video man! Liked! One small thing is this video will be better if you teach the pros and cons between these 2 methods, or just tell us there are the same if nothing different expect the date that the feature added in the library.

[@perumallayaswanth83]

Can I get ur code for each topic which you taught...any GitHub reference please..

[@varunjindal1520]

Try to practice it yourself. Just seeing will help less. :)

[@banti000]

just wondering what will happen if two elements are set to be focused , how will be it handled??

[@bambino3624]

You can't put focus on more than one element. The last focus will overwrite the first one.

[@kadirramazn]

You really helped me a lot. Thank you

[@prisinha]

5:15 callback refs

[@ulugbekdavronov1451]

thanks for good video

[@AkashGupta-qc8rt]

Hey bro please make one project on react js ... How to fetch data from api please

[@sarunmaharjan4440]

fetch("api_url_here") .then(response => response.json()) .then(json => { // do whatever you want with the json received console.log(json) }

[@cristomathew9146]

Try JustDjango tutorials

[@ai.201]

Thanks

[@yathrebamarneh3857]

Thank you too much

[@vaskogood1580]

before start, turn on speed on 1.25 , hf

[@milosleng1175]

he lost me even at 1.00 speed lol

[@narendrareddyyarramreddy2007]

I'm watching every video at 1.5x

[@augittec8562]

first give concept life cycle methods i have no information about life cycle how i can understand

[@Codevolution]

You probably skipped the videos :)

[@arijitparia211]

just pass autofocus

[@LearnphpPhpforbeginners]

Hi please answer my below comment. i am waiting

[@subhamkrnavneet7110]

bhai you don't deliver the concept

[@ikebelida1528]

this. bla bla bla but i keep rewinding the vid of what the difference of the two but still cant under stand haha dang

[@tempaltename8111]

Why you are using . Everytime

[@Pareshbpatel]

{2024-03-22}

[@hamzaakbar5321]

You are an amazing teacher, thank you so much!!