I'm storing a reference to an image item using: const renderedImageRef = useRef()
.
The ref is then assigned in render()
function using:
<img ref={renderedImageRef} src=... />
In another JSX item below, I try to access renderedImageRef.current.clientHeight
using:
<div style={{top: `${renderedImageRef.current.clientHeight}px`}}>Hello world</div>
but this produces an error in the console:
Uncaught TypeError: Cannot read properties of undefined (reading 'clientHeight')
Strangely enough, if I try to access renderedImageRef.current.clientHeight
from inside a useEffect
hook, it displays the height correctly:
useEffect(() => {
if(renderedImageRef !== null) {
console.log(renderedImageRef)
}
}, [renderedImageRef])
Why am I getting the console error?
CodePudding user response:
A possible answer is that this line :
<div style={{top: `${renderedImageRef.current.clientHeight}px`}}>Hello world</div>
is coming in your code before this one:
<img ref={renderedImageRef} src=... />
In witch case it is normal that you are getting the error. It is to know that when you call const renderedImageRef = useRef()
, the value of renderedImageRef
is {current:undefined}
. The JSX need to be rendered before a ref
gets its value in current
field.
A solution is to use a state for the top
:
const [top, setTop]=useState(0)
useEffect(() => {
if(renderedImageRef.current) {
setTop(renderedImageRef.current.clientHeight);
}
}, [renderedImageRef])
<div style={{top:`${top}px`}}>Hello world</div>