Than you so much (: I’m glad you can now think about how to use in your next project! It’s an awesome hook used if there’s no need to re-render a component, like in this case!
We’re most welcome, I’m glad I could help The video below might also help, where I show how to forward ref from one component to another th-cam.com/video/_G5RxzxJz4A/w-d-xo.htmlsi=KCDBupMYFgbvxEwO
The video below might also help, where I show how to forward ref from one component to another th-cam.com/video/_G5RxzxJz4A/w-d-xo.htmlsi=KCDBupMYFgbvxEwO
its a great a easy to follow tutorial, but you did not remove the event in the useEffect. you should remove that event so when the component is closed that event is also closed. Thank you for such a good lecture :)
We’re most welcome, I’m glad I could help The video below might also help, where I show how to forward ref from one component to another th-cam.com/video/_G5RxzxJz4A/w-d-xo.htmlsi=KCDBupMYFgbvxEwO
How would I implement this if I have multiple components in my react page? For example, my page has a navbar.js file which is exported to app.js(and this also imports all the sections from other files/components). How could I implement this in that case?
Hi, I created another video to solve this issue, you can find it on the link below th-cam.com/video/_G5RxzxJz4A/w-d-xo.htmlsi=l75gYCqlR9_103TV How this helps out
Hi Najee, sorry for late response... Basically you need to forward this ref using the forwardRef() hook to do this, great official article here from react. Le me know if this helps reactjs.org/docs/forwarding-refs.html
Hi Mahdi, sorry for late response... Basically you need to forward this ref using the forwardRef() hook to do this, great official article here from react. Le me know if this helps reactjs.org/docs/forwarding-refs.html
@@programwithabu Hi ABu! Thank you so much for this video! i've been struggling for days to find the solution to scrolling within the same page and then I found your video. But I'm also using different components and even though I read the docs on forwardRef() I don't quite understand how the structure should be? I have a Parent component that has Header with nav links AND Sections that has these refs. Do i declare useRefs(null) in the parent component? as well as the function scrollToSection? or is it the other way around? If declaring useRefs and function in Header component, how do I pass refs from Sections in Parent component to Header? Please help I'll be very thankful
You’re very welcome! I’m glad I could help If you also wanna pass this ref between component here’s my video for that th-cam.com/video/_G5RxzxJz4A/w-d-xo.html
How to navigate to some other page present in my project after clicking a link present in my homepage where I have implemented react-scroll ? Please advise.
Interrupting the scroll? The way this one is setup is that the scroll goes up to the top of the page. You can setup yours with the mouse listener event, if I understand your question correctly
Great question Pooja! Basically you need to forward this ref to another component using the forwardRef() hook. Great article on how to do this here reactjs.org/docs/forwarding-refs.html I hope that helps, let me know
thank you for this tutorial, wonderfully explained. But what if each section is a component on its own? For example the Nav is a component, the About section is another component. and all of them gathered in the App.js! I'm having problems understanding how can I do it when each section is a component on its own, HELP :(.
I never had a need for useRef's before this video. Now I see how useful they are when scrolling to a section. Great video Abu! :)
Than you so much (:
I’m glad you can now think about how to use in your next project!
It’s an awesome hook used if there’s no need to re-render a component, like in this case!
dude your videos are really awesome.....u have made REACT easy for me to master
Thank you for your kind words.
I hope with this and my other tutorials can help you get started with your projects
Really cool👍👍👍👍
This was a very detailed tutorial with exceptional way of explaining hooks, thank you very much
Glad I could help!
th-cam.com/video/_G5RxzxJz4A/w-d-xo.html
I also explain how to forward ref from on component to another using the link above
thanks man for such kind of videos, it is really helpful for me...
thank you sir, you're explanation is so clear and i can understand it easily
Thank you so much Abu for explaining this, this will help me to apply in my portfolio website.
We’re most welcome, I’m glad I could help
The video below might also help, where I show how to forward ref from one component to another
th-cam.com/video/_G5RxzxJz4A/w-d-xo.htmlsi=KCDBupMYFgbvxEwO
Thanks man
you explained it so easily
Thank you for the step by step explanation
The video below might also help, where I show how to forward ref from one component to another
th-cam.com/video/_G5RxzxJz4A/w-d-xo.htmlsi=KCDBupMYFgbvxEwO
woooow, amazing tutorial
Thank you Ahmed
I'm glad i could help
I will implement it now in my project! Thank you, and by the way, you have great teaching skills.
Thank you so much for your kind words
And I’m so glad I could help
Very helpful video Abu! Thank you so much
Glad I could help.
this might also be helpful
th-cam.com/video/_G5RxzxJz4A/w-d-xo.html
Great work MUST OB
Thank you dude
Very usefull video
Wonderful tutorial Maashallah
I need this in my project currently. Will try it tomorrow. Thanks ! Can more react and typescript tutorials plz 😊
Love ❤ it guy keep moving
Thank you 😊
Thanks bro. For these easy and clear explanations
that was very helpful for me. tank u
Awesome!!!
I’m glad I could help!
Very clear explanation, thank you
I’m glad I could help!
Thank you! This was very helpful!
Glad I could help
Thank you so much! This was really really helpful and very easy to follow.
Works perfect, thanks mate 😁
I'm glad I could help
Here another video if you want to forward a ref from one component to another
th-cam.com/video/_G5RxzxJz4A/w-d-xo.html
its a great a easy to follow tutorial, but you did not remove the event in the useEffect. you should remove that event so when the component is closed that event is also closed. Thank you for such a good lecture :)
Thanks, helped a lot!
very nice! great video, really usefull! thanks from Brasil
Thanks Eduardo for your support all the way from Brazil
That was helpful. Thank you
Glad I could help
This might also be helpful
th-cam.com/video/_G5RxzxJz4A/w-d-xo.html
to the point, thanks
What do I do if the different sections are housed deep in custom components? How can i pass the ref from parent to deep nested child component?
We’re most welcome, I’m glad I could help
The video below might also help, where I show how to forward ref from one component to another
th-cam.com/video/_G5RxzxJz4A/w-d-xo.htmlsi=KCDBupMYFgbvxEwO
Thank you very much! :)
Thank you brother!
How about if all my navbar items each one in a single folder and a I import them in app.js ??
Hi, I made a new video to solve this issue
th-cam.com/video/_G5RxzxJz4A/w-d-xo.html
How would I implement this if I have multiple components in my react page? For example, my page has a navbar.js file which is exported to app.js(and this also imports all the sections from other files/components). How could I implement this in that case?
Hi, I created another video to solve this issue, you can find it on the link below
th-cam.com/video/_G5RxzxJz4A/w-d-xo.htmlsi=l75gYCqlR9_103TV
How this helps out
Thanks for this. How is this accomplished when the "sections" are in fat different components, as opposed to simply different divs?
Hi Najee, sorry for late response...
Basically you need to forward this ref using the forwardRef() hook to do this, great official article here from react. Le me know if this helps
reactjs.org/docs/forwarding-refs.html
Hi,
Below is a video I made on how to accomplish this. I hope it helps
th-cam.com/video/_G5RxzxJz4A/w-d-xo.html
what is the use of usereef?
what if the navbar is a defined in a separate component
Same Question
Hi Mahdi, sorry for late response...
Basically you need to forward this ref using the forwardRef() hook to do this, great official article here from react. Le me know if this helps
reactjs.org/docs/forwarding-refs.html
@@programwithabu Hi ABu! Thank you so much for this video! i've been struggling for days to find the solution to scrolling within the same page and then I found your video.
But I'm also using different components and even though I read the docs on forwardRef() I don't quite understand how the structure should be?
I have a Parent component that has Header with nav links AND Sections that has these refs. Do i declare useRefs(null) in the parent component? as well as the function scrollToSection? or is it the other way around? If declaring useRefs and function in Header component, how do I pass refs from Sections in Parent component to Header?
Please help I'll be very thankful
@@Anastasia_Zhuravleva Hi, I made a video just for this, i hope it can help
th-cam.com/video/_G5RxzxJz4A/w-d-xo.html
@@muzamilrashid7265 Here's a link to a video where you can forward a ref
th-cam.com/video/_G5RxzxJz4A/w-d-xo.html
Thank you so much I wasted almost three days on this !
You’re very welcome!
I’m glad I could help
If you also wanna pass this ref between component here’s my video for that
th-cam.com/video/_G5RxzxJz4A/w-d-xo.html
How to navigate to some other page present in my project after clicking a link present in my homepage where I have implemented react-scroll ? Please advise.
Hi, I believe this video below that I made will help solve this
th-cam.com/video/_G5RxzxJz4A/w-d-xo.html
Hey But what if I am trying to interrupt the scroll when user is scrolling up?
How can I do that?
Interrupting the scroll?
The way this one is setup is that the scroll goes up to the top of the page.
You can setup yours with the mouse listener event, if I understand your question correctly
can i use (useRef) on routers
help?
Good question Zaheer
I made a video just for this
th-cam.com/video/_G5RxzxJz4A/w-d-xo.html
thank you! what do you suggest if i want to divide those sections into separate components?
I’m sharing a video this week, on how to do this!
Passing refs from one component to another
@@programwithabu wohooo! looking forward to watching and learning more from you
@@momokee2394 I promised a video to solve this, and here you go.
I hope it helps
th-cam.com/video/_G5RxzxJz4A/w-d-xo.html
hey ! I created different components, I create a header, and imported them into pages, this approach not working please help me out.
Great question Pooja!
Basically you need to forward this ref to another component using the forwardRef() hook.
Great article on how to do this here
reactjs.org/docs/forwarding-refs.html
I hope that helps, let me know
@@programwithabu can you do a video on this topic? would help a lot
I have a video coming out this week on this topic, I’ll share it here!
@@subaruLover475 I promised a video on this topic and here you go, I hope it will help
th-cam.com/video/_G5RxzxJz4A/w-d-xo.html
Hi, I made a new video on this topic, I hope it can help
th-cam.com/video/_G5RxzxJz4A/w-d-xo.html
thank you very much
10/10
Best video
Thank you so much, I'm glad I could help
Mumtaaz Maa Shaa Allah
Thank you!!
thank you for this tutorial, wonderfully explained. But what if each section is a component on its own? For example the Nav is a component, the About section is another component. and all of them gathered in the App.js!
I'm having problems understanding how can I do it when each section is a component on its own, HELP :(.
This solution does not work if you are componentizing. any clue?
Here's a link to my new video on how you can forward a ref
th-cam.com/video/_G5RxzxJz4A/w-d-xo.html
Thank you for this. But I'm finding it hard to understand the forwardRef
Hi, sorry for this late reply
I made a video to help with this, follow the link below
th-cam.com/video/_G5RxzxJz4A/w-d-xo.html
I never done this like it i give the component a id and scroll to that id
Interesting way of doing it too
How to solve that white gap im a beginner
Sorry for responding to your comment late,
Which white gap?
But I hope you figured it out by now (:
Second one is not that easy bruh💀