I've scoured other answers, this one coming the closest to what I'm dealing with.
But my issue remains. I cannot access the properties of a synthetic event. Like shiftKey
For some context, I'm using an onClick handler that comes packaged with react-d3-tree library
I thought it was just this library causing problems. But in the click handler I am able to print the event to the console, and I can see the shiftKey parameter is set as expected. But every time I try to access event.shiftKey I get the error:
index.js:1452 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `shiftKey` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().
See my code sample.
The way objects appear in console shouldn't be relied on. Objects are passed by reference in JavaScript. If object internals are updated at some point, they will be updated in console.
persist() creates a copy of event object, so it should appear in console as a snapshot at the moment it was called. That the problem occurs with persist() means that something went wrong with it.
The problem is caused by third-party component, Tree from react-d3-tree. Event object is used asynchronously, persist() in user code won't have desirable results, Instead, persist() should be synchronously called in Tree component.