I want to do some operations with the size of some elements in my React application.

What I would usually do is using refs But the thing is that my elements are rendered in a map loop like so :

listings.map((listing, index) => <div key={index} className={styles.listing}>listing {index}</div>)

How can I retrieve the size of each elements rendered using this Array.map ?

(I need the size to do some computation to get an appropriate "max-height" value for each element).

Thanks for your help !

CodePudding user response：

Can create a series of useRef and assign them to element

const refs = useRef(listings.map(React.createRef))

listings.map((listing, index) => <div key={index} className={styles.listing} ref={refs.current[index]}>listing {index}</div>)