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 ruclips.net/video/_G5RxzxJz4A/видео.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 :)
The video below might also help, where I show how to forward ref from one component to another ruclips.net/video/_G5RxzxJz4A/видео.htmlsi=KCDBupMYFgbvxEwO
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
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 :(.
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
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 ruclips.net/video/_G5RxzxJz4A/видео.html
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 ruclips.net/video/_G5RxzxJz4A/видео.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 ruclips.net/video/_G5RxzxJz4A/видео.htmlsi=l75gYCqlR9_103TV How this helps out
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 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
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
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!
Really cool👍👍👍👍
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
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
ruclips.net/video/_G5RxzxJz4A/видео.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 :)
Wonderful tutorial Maashallah
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
ruclips.net/video/_G5RxzxJz4A/видео.htmlsi=KCDBupMYFgbvxEwO
Very usefull video
This was a very detailed tutorial with exceptional way of explaining hooks, thank you very much
Glad I could help!
ruclips.net/video/_G5RxzxJz4A/видео.html
I also explain how to forward ref from on component to another using the link above
thank you sir, you're explanation is so clear and i can understand it easily
Great work MUST OB
Thank you dude
Thanks man
you explained it so easily
I need this in my project currently. Will try it tomorrow. Thanks ! Can more react and typescript tutorials plz 😊
thank you very much
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
ruclips.net/video/_G5RxzxJz4A/видео.html
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
thanks man for such kind of videos, it is really helpful for me...
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
ruclips.net/video/_G5RxzxJz4A/видео.html
that was very helpful for me. tank u
Awesome!!!
I’m glad I could help!
woooow, amazing tutorial
Thank you Ahmed
I'm glad i could help
Very clear explanation, thank you
I’m glad I could help!
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 :(.
Very helpful video Abu! Thank you so much
Glad I could help.
this might also be helpful
ruclips.net/video/_G5RxzxJz4A/видео.html
to the point, thanks
Thanks bro. For these easy and clear explanations
Thank you very much! :)
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
Thank you brother!
Thank you! This was very helpful!
Glad I could help
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
ruclips.net/video/_G5RxzxJz4A/видео.html
Thank you so much! This was really really helpful and very easy to follow.
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
ruclips.net/video/_G5RxzxJz4A/видео.htmlsi=KCDBupMYFgbvxEwO
what is the use of usereef?
Thanks, helped a lot!
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
ruclips.net/video/_G5RxzxJz4A/видео.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
ruclips.net/video/_G5RxzxJz4A/видео.htmlsi=l75gYCqlR9_103TV
How this helps out
That was helpful. Thank you
Glad I could help
This might also be helpful
ruclips.net/video/_G5RxzxJz4A/видео.html
can i use (useRef) on routers
help?
Good question Zaheer
I made a video just for this
ruclips.net/video/_G5RxzxJz4A/видео.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
ruclips.net/video/_G5RxzxJz4A/видео.html
10/10
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
ruclips.net/video/_G5RxzxJz4A/видео.html
Love ❤ it guy keep moving
Thank you 😊
Thank you!!
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
ruclips.net/video/_G5RxzxJz4A/видео.html
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
ruclips.net/video/_G5RxzxJz4A/видео.html
@@muzamilrashid7265 Here's a link to a video where you can forward a ref
ruclips.net/video/_G5RxzxJz4A/видео.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
ruclips.net/video/_G5RxzxJz4A/видео.html
Hi, I made a new video on this topic, I hope it can help
ruclips.net/video/_G5RxzxJz4A/видео.html
Best video
Thank you so much, I'm glad I could help
very nice! great video, really usefull! thanks from Brasil
Thanks Eduardo for your support all the way from Brazil
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
ruclips.net/video/_G5RxzxJz4A/видео.html
Mumtaaz Maa Shaa Allah
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 (:
I never done this like it i give the component a id and scroll to that id
Interesting way of doing it too
Second one is not that easy bruh💀