I have a dynamic array which is coming from the server and i need to set viewMore link when the element height is greater than certain height. This viewMore content need to be shown like this.
<div id={`_message_detail_list${id}`}>
<ul style={{ "max-height": valListMaxHeight }}>{listItems}</ul>
<div>
{viewMoreText (here i need to add another condition to check height of ul is greater than some threshold) && (
<div>
<a
id={`_primaryAction_${id}`}
href="#"
data-key={id}
onClick={this.handleClick}>
{viewMoreText}
</a>
</div>
is it possible to calculate the height and show another element based on this height?
You can use a ref in comibination with clientHeight like so:
const ulElementRef = useRef(null);
const ulHeight = elementRef.current?.clientHeight;
//...
<ul ref={ulElementRef} style={{ "max-height": valListMaxHeight }}>{listItems}</ul>
Then you can use ulHeight for your condition.