Breaking News: Grepper is joining You.com. Read the official announcement!

useRef is not working with custom compnents

Glorious Gnu answered on March 4, 2022 Popularity 3/10 Helpfulness 1/10

answer useRef is not working with custom compnents

useRef is not working with custom compnents

Comment

On custom components, ref needs to be forwarded.

An example would be like:
// inside index.js
return(
<Navbar scrollFunc={scrollToRef} />      
    <Mainlogo ref={mainLogoRef} />
    <Sales  ref={salesRef} />
    <Introduction ref={introductionRef} />
    <Blog ref={blogRef} />
<Footer />
)
// 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 render multiple DOM elements, so you need to be explicit about
where the `ref` should be assigned to.

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript use-ref

Link to this answer
Share Copy Link