From React 16.3 on wards, if you are using ref, do below. constructor(){ super(); this.firstName = React.createRef(); } Then in the input field ref = {this.firstName} To access the value: this.firstName.current.value
I am pretty sure this channel will get million subscribers by 2021. damn, people spend lots of money on udemy because I am pretty sure they dont know this channel. I learnt oop in this channel and now I am working hard with react to really master the foundation while learning datastructure and algorithms for my interview at amazon soon. I will connect this to my blog so that people can view. I will also share this on media, reddit and all the blog that I am connecting on right now thanks for this such an amazing content.
thanks for your constant dedication helping the community with these topics. I started watching you months ago and now, while I'm attending a coding bootcamp, I keep looking at your videos for a better understanding of all the things I`m quickly forced to learn. Your way of explaining things line by line, together with a solid deep knowledge of whats going on under hood, makes your channel a true learning gem among other educational channels. Thanks again and I'm sure that your channel will grow further more, as quality, on the long run, pays. Whenever I have free time I will translate one of your videos to Spanish in return for your unconditional dedication!
I appreciate the offer for translation. Currently i don't have any video translated to Spanish so this would be a good addition. THanks for watching and for your support.
@techsith, this is a really unique video about refs in-depth. Its a one-of-a-kind video I have watched among so many videos on refs in general where a quick sweep of useRef() hook is done & the video eventually ends. Thanks for explaining this so clearly!!! Keep up the great work! You fan, Yor
Best thing about your videos is you explain concepts in simple words and with a small example , so that its easy to understand for beginners . I definitely recommend your videos to everyone who wants to learn REACT . ..WORTH watching .... Also it will be great , if you can make a small project which has basic CRUD operations . .....Thank you
Many thanks. Its so frustrating when you are new to something and cannot do presumably simple things like navigating to the next input box with the enter key. Keep up the good work!
im puzzled when to use this.inputRef.current.focus() vs this.inputRef.focus()..because sometimes when code is not working without current i change it to current and vice versa
17:31 - that was pretty tricky =) It took me a couple of minutes to realize that you clipped the video and cut off the part where you added "const" to "onClick"...
what is the difference between I create reference in constructor and then use it in html versus callback.Eg I can write something like this - this.firstName = React.ceateRef() and I can use ref = {this.firstName} in html I have tested and it works in react 16 and 16+
you are saying that this.firstName is giving you undefined? That means its not accesible or available. Without looking at your code Its hard to say why.
In my case i have dynamically repeated radio button is there. am getting all the refs in did mount, and am checking true to only one radio button but it is not getting affected even checked true there in that (debugging)
techsith no i need all the refs (i.e., dynamycally looping radio element ) and need to change one element with condition, i got all the ref in a variable but when am trying to change one ref dom is not updating. Hope u understood my senario
You have to use forwarding ref . I have a recent tutorial on forwarding ref that you can check it out. I am using it with hooks but you can use it without hooks.
Sir i am new to react my background is as a mobile developer. i have question how to pass reference to Third party plugins like I know how to pass in but not working in floating case not getting focus on reload. Its says current.focus(); is not a function. i can share my code snippet via email address
You can pass field Name where you want to set focus and avoid switch conditions like: onClick={this.onClick.bind(this, 'lastName')} and in function def we can write: this[target].focus(); , So in this way we can avoid multiple switch conditions. Are you agree ??
Hi , I have tried to follow your Tutorial, But it not working for me, the changes I have done is followed the react 16.3 version so now i can do like this: this.firstname = React.createRef(); and then when rendering it I had Arrow function ( as because => arrow function does the binding thing)so my code look like: FirstName: { this.onKeyUp("firstname"); }} />
So I want to know Why my code is not working. Thanks in advance! my whole code: export default class Forms extends Component { constructor(props) { super(props); this.firstname = React.createRef(); this.lastname = React.createRef(); this.age = React.createRef(); this.submit = React.createRef(); } onSubmitHandler = e => { console.log("this.firstname", this.firstname.current.value); }; onKeyUp = (target, e) => { if (e.keyCode === 13) { switch (target) { case "firstname": this.lastname.current.focus(); break; case "lastname": this.age.current.focus(); break; case "age": this.submit.current.focus(); break; default: this.firstname.current.focus(); } } }; render() { return ( FirstName: { this.onKeyUp("firstname"); }} />
Techsith i like your explanation.Why don't you make a real app website in react after all thes fundamental?With real app everyone will understand react better because you explain it good and if someone make good explanation,sooner or later will get more and more reviews.We are waiting for a real app.
Oh really! 'firstName'... is the property of component. You can please visit this link to see in action jsfiddle.net/sajankumarv/zga5po1s/13/ Good luck!
Maybe you can flesh this out a bit more? this[target] is confusing syntax in my mind. When I see it I think 'this' with an index of target....like you're calling an array item. Can you explain this syntax a little further? Why does this[target] give us the element we wish to focus on?
sir try to speak some words clearly. keep in mind that students from rural areas also watch ur videos. So utter it clearly , speak indian english, smile on ur face, think some one is making notes!!!! Thanks for taking advise positively.
From React 16.3 on wards, if you are using ref, do below.
constructor(){
super();
this.firstName = React.createRef();
}
Then in the input field
ref = {this.firstName}
To access the value: this.firstName.current.value
or better use react hooks, just simply asign any const = useRef(null), and then use that const in the element as ref={name of the const} ;)
I am pretty sure this channel will get million subscribers by 2021.
damn, people spend lots of money on udemy because I am pretty sure they dont know this channel.
I learnt oop in this channel and now I am working hard with react to really master the foundation while learning datastructure and algorithms for my interview at amazon soon.
I will connect this to my blog so that people can view.
I will also share this on media, reddit and all the blog that I am connecting on right now
thanks for this such an amazing content.
134k subs :)
thanks for your constant dedication helping the community with these topics. I started watching you months ago and now, while I'm attending a coding bootcamp, I keep looking at your videos for a better understanding of all the things I`m quickly forced to learn.
Your way of explaining things line by line, together with a solid deep knowledge of whats going on under hood, makes your channel a true learning gem among other educational channels. Thanks again and I'm sure that your channel will grow further more, as quality, on the long run, pays.
Whenever I have free time I will translate one of your videos to Spanish in return for your unconditional dedication!
I appreciate the offer for translation. Currently i don't have any video translated to Spanish so this would be a good addition. THanks for watching and for your support.
Great then! Do you have any particular video you would like to have it on Spanish?
@techsith, this is a really unique video about refs in-depth. Its a one-of-a-kind video I have watched among so many videos on refs in general where a quick sweep of useRef() hook is done & the video eventually ends.
Thanks for explaining this so clearly!!!
Keep up the great work!
You fan,
Yor
Best thing about your videos is you explain concepts in simple words and with a small example , so that its easy to understand for beginners . I definitely recommend your videos to everyone who wants to learn REACT . ..WORTH watching .... Also it will be great , if you can make a small project which has basic CRUD operations . .....Thank you
Wow, Indian with good English. Thank god!
Many thanks. Its so frustrating when you are new to something and cannot do presumably simple things like navigating to the next input box with the enter key. Keep up the good work!
Nice. I made an entire website in React in a span of seven months and only now do I understand what the heck refs are. Thanks.
most of the people dont use refs until when they have to and there is no other alternative. :)
You should mention in the title that you address refs in stateless functional components. Good tuts man!
im puzzled when to use this.inputRef.current.focus() vs
this.inputRef.focus()..because sometimes when code is not working without current i change it to current and vice versa
Nice video. Clear, concise and to the point. Keep up the great work.
Couldn't understand why to use props in myinput 18:36
with react hooks we can simply write as...
const firstNameRef = useRef(null)
and then use firstNameRef as a value to ref attribute of element.
Yes this is old way of doing things. hooks makes it much simpler.
17:31 - that was pretty tricky =)
It took me a couple of minutes to realize that you clipped the video and cut off the part where you added "const" to "onClick"...
Thank you, Oleg, for this comment. I couldn't understand why my code didn't work. It helped me.
Do you have any tutorials on Mongoose or montDB??
whether the keyCode has been deprecated these days?
As good as any other video from you. A big like.
how to move to next input on dynamic inputs
there is an error on 17:30 in this video
Can you please explain that How does the "bind(this , "firstName")" works?
You said you will be explaining when to use and when not to use ref, but you did not cover it ! You just covered one use case, anyway thank you.
Good tutorial, easy to understand. Thanks for the video
Thanks Ayesha for watching.
I like your description easy to be understood and obvious! good job keep it up!
what is the difference between I create reference in constructor and then use it in html versus callback.Eg I can write something like this -
this.firstName = React.ceateRef() and I can use ref = {this.firstName} in html I have tested and it works in react 16 and 16+
yes it works. as react is very forgiving but they dont recommend using it that way. Eventually they will completely deprecate it.
what is input variable ? in refs ? How it goes in the function? Does it have to be tag name?
Thanks
Input variable is nothing but input props. you can pass into a function.
I'm getting undefined in the console when I try to console log the state ( 7:24 )
you are saying that this.firstName is giving you undefined? That means its not accesible or available. Without looking at your code Its hard to say why.
@@Techsithtube I solved the error by setting the value with this.satate.exemple and changing it with onChangeHandler.
Documet.getElementBy.... etc is doing same thing? What is main differnece then
In react you dont access elements directly . you do it react way.
@@Techsithtube but it is possible. Am I ri8?
Hi Sir, for me , after following the same procedure , "Cannot read property 'keyCode' of undefined react js" error is coming, please suggest.
When does this error occurs ?
it's a mistake that's shows me (inputRef.focus();) on 17:30 mnt
What version of react are you using? There is a change
@@Techsithtube v 16.7.0
why you used bind here?onKeyUp isnt a arrow function?and arrow function doesnt need this binding i think?
We dont need binding there, however if you want to pass parameters this is a one way of doing it.
@@Techsithtube ohh got it thanks
Awesome tutorial... Also glad you shortened the intro animated logo segment
Thanks you very much. I like your method of explain tricky concepts using simple and easy to follow examples..
@4:51 Hey TechSith. Did you say 'this' is deprecated or did I miss something?
what i mean to say is ref="someref" is deprecated. instead string ref you have to use a callback function.
oooh ok. Thanks
In my case i have dynamically repeated radio button is there. am getting all the refs in did mount, and am checking true to only one radio button but it is not getting affected even checked true there in that (debugging)
So you want only one ref?
techsith no i need all the refs (i.e., dynamycally looping radio element ) and need to change one element with condition, i got all the ref in a variable but when am trying to change one ref dom is not updating. Hope u understood my senario
Really clarified refs. Much appreciated!
Hey +techsith, I found this very helpful. Thank you for taking the time to make this video.
Appreciate the comment Britton . Keep on learning
Awesome video! and really clear explanation
The best use case of refs is changing the state of child component from the parent component.
really good video to learn about refs. I am just wondering, how do we access ref from child to parent component ?
You have to use forwarding ref . I have a recent tutorial on forwarding ref that you can check it out. I am using it with hooks but you can use it without hooks.
Such a cool tutorial. Much appreciate 😎😎
Thanks for watching Trang.
Sir i am new to react my background is as a mobile developer.
i have question how to pass reference to Third party plugins like
I know how to pass in but not working in floating case not getting focus on reload.
Its says current.focus(); is not a function.
i can share my code snippet via email address
Sure feel free to send me the code.
You can pass field Name where you want to set focus and avoid switch conditions
like: onClick={this.onClick.bind(this, 'lastName')}
and in function def we can write:
this[target].focus(); , So in this way we can avoid multiple switch conditions.
Are you agree ??
that is a good point
Hi , I have tried to follow your Tutorial, But it not working for me, the changes I have done is followed the react 16.3 version so now i can do like this: this.firstname = React.createRef(); and then when rendering it I had Arrow function
( as because => arrow function does the binding thing)so my code look like:
FirstName:
{
this.onKeyUp("firstname");
}}
/>
So I want to know Why my code is not working. Thanks in advance!
my whole code:
export default class Forms extends Component {
constructor(props) {
super(props);
this.firstname = React.createRef();
this.lastname = React.createRef();
this.age = React.createRef();
this.submit = React.createRef();
}
onSubmitHandler = e => {
console.log("this.firstname", this.firstname.current.value);
};
onKeyUp = (target, e) => {
if (e.keyCode === 13) {
switch (target) {
case "firstname":
this.lastname.current.focus();
break;
case "lastname":
this.age.current.focus();
break;
case "age":
this.submit.current.focus();
break;
default:
this.firstname.current.focus();
}
}
};
render() {
return (
FirstName:
{
this.onKeyUp("firstname");
}}
/>
lastName:
{
this.onKeyUp("lastname");
}}
/>
Age:
{
this.onKeyUp("age");
}}
/>
this.onKeyUp("submit")}
onClick={() => this.onSubmitHandler}
/>
);
}
}
14:30 "anyways .. you get the point"
actually no , I didn't get the point the part of demonstrating `alert()` instead of `console.log()` xD
you are really good , you solved my problem.
I am glad that it helped. Thanks for watching Yasir!
Thank you for this great tutorial!
Hi TechSith, Could you make a video on ASYNC AWAIT
Thank you for this video. It helped me a lot!
Very Nice Video..Learned a lot..thnx!!
Great tutorial. Thank you for sharing.
I cant believe this is free! thanks again sir!
imagine this guy standing behind you in crowded metro, whispering react in your ears
WHY? :D
Appreciated this. Thank you.
just today i was looking at refs in my new project
I just push the youtube bell icon for the first time in forever
Thanks Fazlul :)
His follow up video for dealing with refs in function components and hooks: ruclips.net/video/ScT4ElKd6eo/видео.html
Thanks for reference on ref :)
Tell me how to be as smart as you are......watched tons of tutorials and yours are the best.
Thanks for the nice comment. All you have to do is to understand fundamentals and everything else becomes easy.
best tutorial ...thank you sir
One of the best thank you so much!
You are the best! so cool tutorials!
Very informative - thank you.
you are really , you solved my problem.
Great videos.. Maybe better to pass the name of the next input in the class Component as the second parameter, so you do not need a switch statement
Awesome Explanation....as like all
Sir,explain about Context Api
Techsith i like your explanation.Why don't you make a real app website in react after all thes fundamental?With real app everyone will understand react better because you explain it good and if someone make good explanation,sooner or later will get more and more reviews.We are waiting for a real app.
the best react tutorial i have seen
Nice videotuts though.
Keep up the good work!
2020 depreciated
Nice explanation.
Hey sir please make tutorials on express.js and MongoDB please!
Helpful, thank you.
Good tutorial.
you are the best
good one !
You have a strong american accent
thank you
You don't have to use switch case. Instead if(e.keyCode === 13) { this[target].focus(); } simple isn't? :)
on the onChange event you can do e.target. but this is a onKeyPress so you dont have access to input element. also 'this' means the component.
Oh really! 'firstName'... is the property of component. You can please visit this link to see in action jsfiddle.net/sajankumarv/zga5po1s/13/ Good luck!
ohh! this works. Thanks man.
Maybe you can flesh this out a bit more? this[target] is confusing syntax in my mind. When I see it I think 'this' with an index of target....like you're calling an array item. Can you explain this syntax a little further? Why does this[target] give us the element we wish to focus on?
great
Thanks
nice
barely watching this and I will tell that React is evil for absolute beginner
Handika start from the beginning level. refs and doms are bit complex if you don't know the basics.
sir try to speak some words clearly. keep in mind that students from rural areas also watch ur videos. So utter it clearly , speak indian english, smile on ur face, think some one is making notes!!!! Thanks for taking advise positively.
nice
great
Thanks for watching Prampreet.