Any idea how to track a div dynamic Hight increase during an iteration? my issue here is I am getting the total height of the items rather than the height being increased on every iteration?
{items.map((item) => {
if (document.getElementById('divtotrack')) {
let clientHeight = document.getElementById('divtotrack')!.clientHeight;
}
return (
<div>
<item
key={item.id}
id={item.id}
content={item.content}
/>
</div>
);
})}
</div>
</div>when you are rendering, the component exists only in the virtual DOM, after the reconciliation phase it is synched with the browser DOM, so the moment you are mapping most likely you will not find it in the DOM. To do what you want you need to implement you logic inside the item component (Be aware the it should be named in uppercase to be recognized as a valid JSX)
inside the item component create a ref variable and attach it to the parent element.
const itemRef = useRef();
useEffect(() => {
if(itemRef.current) {
const height = itemRef.current.clientHeight;
...do what you need here. If you need to change any of the ref div attributes use a state variable.
}
}, [itemRef.current]
return (
<div ref={itemRef}>....</div>
)
If you want to use MutationObserver do it inside useEffect or use a custom hook or an existing one (just search for useMutationObserver)