Question

139

How to add refs dynamically with react hooks?

rated 0 times [ 143] [ 4] / answers: 1 / hits: 51251 / 5 Years ago, sun, may 5, 2019, 12:00:00

So I have an array of data in and I am generating a list of components with that data. I'd like to have a ref on each generated element to calculate the height.
I know how to do it with a Class component, but I would like to do it with React Hooks.

Here is an example explaining what I want to do:

import React, {useState, useCallback} from 'react'

const data = [

  {

    text: 'test1'

  },

  {

    text: 'test2'

  }

]

const Component = () => {

  const [height, setHeight] = useState(0);

  const measuredRef = useCallback(node => {

    if (node !== null) {

      setHeight(node.getBoundingClientRect().height);

    }

  }, []);



  return (

    <div>

      {

        data.map((item, index) => 

          <div ref={measuredRef} key={index}>

            {item.text}

          </div>

        )

      }

    </div>

  )

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

isham

Add To Favorites

Follow

Total Points: 69

Total Questions: 86

Total Answers: 86

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

isham questions

1 NodeJS - TypeError: Busboy is not a constructor

Wed, Jan 19, 22, 00:00, 2 Years ago

1 How to pass query parameters to next.js api handler when calling from inside of getStaticProps

Wed, Dec 2, 20, 00:00, 4 Years ago

1 How to display the values from ajax success data to the html table?

Tue, Feb 25, 20, 00:00, 4 Years ago

1 How to set expanded prop for material ui TreeView component conditionally

Tue, Feb 4, 20, 00:00, 4 Years ago

1 Getting Firebase doc.data is undefined

Sun, Dec 1, 19, 00:00, 5 Years ago

View All

answered 5 Years ago trentb · Accepted Answer

Not sure i fully understand your intent, but i think you want something like this:

const {

  useState,

  useRef,

  createRef,

  useEffect

} = React;



const data = [

  {

    text: test1

  },

  {

    text: test2

  }

];



const Component = () => {

  const [heights, setHeights] = useState([]);

  const elementsRef = useRef(data.map(() => createRef()));



  useEffect(() => {

    const nextHeights = elementsRef.current.map(

      ref => ref.current.getBoundingClientRect().height

    );

    setHeights(nextHeights);

  }, []);



  return (

    <div>

      {data.map((item, index) => (

        <div ref={elementsRef.current[index]} key={index} className={`item item-${index}`}>

          {`${item.text} - height(${heights[index]})`}

        </div>

      ))}

    </div>

  );

};



const rootElement = document.getElementById(root);

ReactDOM.render(<Component />, rootElement);

.item {

  box-sizing: border-box;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid #ccc;

}



.item-0 {

  height: 25px;

}



.item-1 {

  height: 50px;

}

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js></script>

<div id=root/>