1

I've come across an interesting issue, I'm trying to assign a ref to a <div>, so I have a useRef() and I put it on my <div. My goal is that once I call a specific function I'll have the reference to mimic .click() on that div. Now, when I call that function it doesn't work, the ref is null, so I console.log(divRef) and what I see in devtools is the following:

enter image description here

I see that on my ref, current is null but inside there's also the reference to my div? I can't access that div reference, even though when I see it's properties I can confirm that it's indeed the div that I want to reference.

Further investigating, on devtools I right click and choose 'Save as global variable' to see what happens, and now I get the ref correctly, with current: div, just to make sure, I use the global variable to mimic the .click() behavior and it does work! I just saved the same object, but somehow now is not null on devtools.

enter image description here

How come when I log my ref, I can see my div being returned but I can't access it, somehow is null and not null at the same time? Again, my goal is to be able to access the reference on a function call so I can mimic .click()

PD: I know images are discouraged, but I really wanted to share what I'm looking at in devtools, that is, that the object is null but also has the correct references inside of it.

Jorche
  • 147
  • 4
  • 13

1 Answers1

3

is null and is not null at the same time?

No. its dev tools evaluation of that object, if you hover your mouse over that blue i icon it will tell you values are evaluated just now. since the object reference it is logging is the same as the time it created when it was null; it you really want to see what is contained in an object in a specific point time you should log its JSON.stringify() value ( or deep copy and log the copied version ).

that ref was empty when it created and current will be assigned after first re-render so this will happen;

Mechanic
  • 5,015
  • 4
  • 15
  • 38