I am trying to ensure that my div is always the same width as the image it contains, even when the window is resized and the image adjusts automatically. I attempted to solve this using the useState hook, but it does not seem to respond to resize events.
const imageElement = useRef();
const textElement = useRef();
const [imageWidth, setImageWidth] = useState();
useEffect(() => {
setImageWidth(
imageElement.current.getBoundingClientRect().width
);
});
<img
src={profilePic}
alt="Profile Pic"
className="About-basic-info-image"
ref={imageElement}
/>
<p
className="About-basic-info-text"
ref={textElement}
style={{ width: imageWidth }}
>
{textContent}
</p>