CODEWITHSUNDEEP
javascriptreactjs
Melissa
Melissa

Reputation: 787

How can I read the current React.useRef in the child component?

I have a React.useRef in the parent component const portfolioRef = React.useRef(null) And want to use the current version of that in the child component const parent = portfolioRef.current. But when I use it in this way, it says cannot read property of current. Has anyone an idea how to fix this?

export function Portfolio() {
  const portfolioRef = React.useRef(null)
  return (
    <div  className={cx(styles.component, styles.scrollWrapper)}>
      <div className={styles.topIcon} dangerouslySetInnerHTML={{ __html: arrow }} />
      <div ref={portfolioRef} className={styles.scroll}>
       <PortfolioItem
          title='Article about Kaliber Academie'
          text='I wrote an article about my experience at Kaliber'
          link='https://medium.com/kaliberinteractive/hoe-technologie-het-hart-van-een-luie-scholier-veranderde-3cd3795c6e33'
          linkTekst='See Article' />

       </div>
    </div>
  )
}

function PortfolioItem({ text, title, link, linkTekst, portfolioRef }) {
  const portfolioItemRef = React.useRef(null)

  React.useEffect(() => {
   const element = portfolioItemRef.current
   const parent = portfolioRef.current
   calculateDistance(parent, element)
   }, [portfolioRef])

  return (
    <div ref={portfolioItemRef} className={styles.componentItem}>
     <div className={styles.title}>{title}</div>
      <div className={styles.content}>
       <div className={styles.text}>{text}</div>
        <div className={styles.links}>
          <a className={styles.linkTekst} href={link}>{linkTekst} </a>
          <div className={styles.linkIcon} dangerouslySetInnerHTML={{ 
           __html:arrow }} />
         </div>
      </div>
    </div>
  )
}

function calculateDistance(parent, element) {
  const parentRect = parent.getBoundingClientRect()
  const parentCenter = parentRect.top + parentRect.height / 2
  const elementRect = element.getBoundingClientRect()
  const elementCenter = elementRect.top + elementRect.height / 2
  const distance = Math.abs(elementCenter - parentCenter)
  console.log(distance)
}

Upvotes: 0

Views: 1371

Answers (2)

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

function PortfolioItem({ text, title, link, linkTekst, portfolioRef }) {
    const portfolioItemRef = React.useRef(null) //line 1

    const element = portfolioItemRef.current //line 2

    const parent = portfolioRef.current //line 3

    calculateDistance(parent, element)
    return (
        <div ref={portfolioItemRef} className={styles.componentItem}>
        </div>
    )
}

when the code execute in order

  • Line #1: create a reference to hold an element or value by using useRef nad initiate it to null,
  • Line #2: trying to access current value of the ref which is still null //Error, because ref is not holding any value at this moment

to access the value you have to put the logic inside useRef

React.useEffect(() => {
    const element = portfolioItemRef.current
    const parent = portfolioRef.current
    calculateDistance(parent, element)
}, [])

not tested.

Upvotes: 2

Rostyslav
Rostyslav

Reputation: 2866

It seems that you don't pass the ref to the child at all. Try to pass it in props

<PortfolioItem
  portfolioRef={portfolioRef} {/* here you are passing the ref in props */}
  title="Article about Kaliber Academie"
  text="I wrote an article about my experience at Kaliber"
  link="https://medium.com/kaliberinteractive/hoe-technologie-het-hart-van-een-luie-scholier-veranderde-3cd3795c6e33"
  linkTekst="See Article"
/>;

Upvotes: 2

Related Questions