How to add "refs" dynamically with react hooks? : <p>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.</p>

<p>Here is an example explaining what I want to do:</p>

<pre><code>import React, {useState, useCallback} from 'react'
const data = [
  {
    text: 'test1'
  },
  {
    text: 'test2'
  }
]
const Component = () =&gt; {
  const [height, setHeight] = useState(0);
  const measuredRef = useCallback(node =&gt; {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);

  return (
    &lt;div&gt;
      {
        data.map((item, index) =&gt; 
          &lt;div ref={measuredRef} key={index}&gt;
            {item.text}
          &lt;/div&gt;
        )
      }
    &lt;/div&gt;
  )
}
</code></pre>
