useRef() Hook on a custom component

Question

I'm trying do create a Navigation Bar that when the user click on one of the links, the page scrolls to some section. In the code above, each element is a section of my page:

    <Navbar scrollFunc={scrollToRef} />      
    <Mainlogo ref={mainLogoRef} />
    <Sales  ref={salesRef} />
    <Introduction ref={introductionRef} />
    <Blog ref={blogRef} />
    <Footer />

The 'refs' was declares as folowing, using the useRef hook:

  const mainLogoRef = useRef(null)
  const salesRef = useRef(null)
  const introductionRef = useRef(null)
  const blogRef = useRef(null)

The function i'm using to scroll is the folowing:

  const scrollToRef = ref => {
    window.scrollTo({ top: ref.current.offsetTop, behavior: "smooth" })
  }

The thing is that the 'current' key is always undefined. When i do something like that:

<div ref={salesRef}> <Sales  /><div>

or

<section ref={salesRef}> <Sales  /><section>

Things works just fine. I'm assuming that 'ref' works only on html 'pure' tags. Is there any way to use 'useRef' hook in a custom component?

disclaimer: Sorry for bad english, i'm not a native speaker.

Answer 1

On custom components, ref needs to be forwarded.

An example would be like:

// inside Sales.js
const Sales = (props, ref) => (
  <div ref={ref}> // assigns the ref to an actual DOM element, the div
    /* anything you want to render here */
  </div>
)

export default React.forwardRef(Sales);

This is because ref is (usually) a reference to a DOM element. A React Component can renders multiple DOM element, so you need to be explicit about where the ref should be assigned to.