Getting and Updating Dynamic Heights for React Components

If you work on #UI you will always have many UI DOM elements that get and/or change height dynamically (eg. help/description strings etc.), with resize events or such, that you can't set and update heights for in CSS. There can also be times you do need some heights on certain elements to calculate heights for something else eg. Some ag-grid container (notorious for needing static height some parent) etc.

The usual way you might do it via dynamic scripts is: Calculate height selecting the DOM element struggle with classes, IDs, with querySelector etc. using yourElement.offsetHeight; use React refs, vars to get it, update it, so it goes....

If you're using React, here's cool, super useful React Component wrapper that was shared on my team! You can set dynamic heights in a much "cleaner" way and it is also good for cases where setting an ID hook may not even be an option as some dynamic IDs might be reserved for it. 

Prerequisites: 

1. You need your div for height calculation as its own div or separate component (eg. Header string component) that can be wrapped in the component wrapper and not as a div that is created by being passed as a prop to another component.
2. You still need to account for resize events calling updateHeight functions in React Life Cycle hooks (componentDidMount, componentWillUnmount as your case may be.)
3.  Need to set state for heights and have functions to update heights based on above. 

Steps:

1.  Usual npm/yarn install, import etc. (import { ReactHeight } from 'react-height';)
2. Set initial heights if any as const s in your constructor
3. Create your main heights calculate function. i.e. componentHeightReadyFunc
4. Create your updateHeight function and use them in 
5. Use it to wrap your component as shown in the usage step.

This is your "main course" / "meal" function

Usage:

This is THE STUFF that you're now ready to use now in your component render.
Voila! you've got your dynamic height/s and updated them. Most likely, you've set them as inline styles on the component where you need them (yes, inline styles are legit use case when you need dynamic heights etc., so don't fret.).

Now just watch it change in the Devtools inspector and enjoy your minute of "glory"! If not, change, debug, rinse and repeat.

References:
https://www.npmjs.com/package/react-height

I have put a lot of thought and time into writing this, so that anyone new to ReactJS (like me at this time) can find it easy to use, consolidating aspects that my team and I have found through research, trial and error.

If you found this post useful please share and donate to these wonderful non-profits that are doing amazing work! It does NOT benefit me monetarily, but does more than any monetary benefit can. I will surely be grateful and motivated to post/share more. 
If you found this post worthless, definitely donate to these worthy causes, so you can feel better by doing something else worthwhile to compensate.

Sheldrick Wildlife Trust
https://www.sheldrickwildlifetrust.org/donate

The Elephant Sanctuary in Tennessee
https://shop.elephants.com/2020YearEndCampaign

Elephant Nature Park, Chiang Mai (of the amazing "Lek" Chailert):
https://www.elephantnaturepark.org/how-you-can-help/
For those in USA: Since ENP is a foreign non-profit, you can match the donation from your companies if you donate to their sister concern 501c3 below:
https://www.abrahamfoundation.org/elephant-nature-park