Discussion on "A Look at React Hooks: useRef to Scroll to an Element"

Victoria Lo · 2022-01-28T13:00:42.139Z

Welcome to another article of A Look at React Hooks, a beginner-friendly series on React Hooks. In this article, let's look at a simple application of the useRef Hook. Before reading this, you should have a basic understanding of the useRef Hook. If...

Hi Victoria! Great article

I have one question though. I have let's say a home page, which has multiple sections, each section with its own reference. I am able to, by clicking a button, scrolling to a section (I'm not using <Link> nor <Router>). But, what I'm trying to do now is, inside that section, click a new button, that scrolls to another section (which is not a child) of the home page.

Do you think it is possible without using the router component?

Thank you very much! Your articles are really helpful

This is an interesting method of achieving this feature. I've always used the id attribute to achieve this feature but I guess this way the ref wouldn't get added to the URL.

Also, I noticed the gifs aren't showing.

Thanks for sharing!

Hi Favourite Jome! Oh? That's weird, the GIFs are working on my other devices when I checked. Can you try again and let me know?

For React, we use the ref attribute to access DOM elements, not id :)

The Gif showed on my PC, I guess it was a network issue on my phone even though I tried different browsers on my phone.

Oh yes, I do know we make use of ref attribute to access DOM elements, but I meant to say you could achieve the same functionality using the id attribute with anchor elements and some CSS, at least that's how I would have done it.

But for this method, the id value would get added to the browser URL address.

Here's a pen demonstrating what I meant.

codesandbox.io/s/lucid-browser-hlbx8

Great article Victoria Lo probably going to be using this type of functionality in a project soon.

Thanks Andrew Baisden! I hope to see your awesome project soon~

That project was my new portfolio website which is now complete Victoria Lo .

andrewbaisden.com

Andrew Baisden WOW! Your website looks amazing! Well done! 👏👏

Search Hashnode

A Look at React Hooks: useRef to Scroll to an Element

Responses(3)