BlueprintJS / React - trouble retrieving TagInput > Tag value via onClick

In a React/BlueprintJS app, I have a TagInput. I need to access the string value of any Tag when clicked. For simplicity, let's assume I just need to console.log(value).

I can't seem to locate the Tag's value in the callback. Based on the documentation, I believe I need to pass an onClick function within tagProps. However, nothing I've tried seems to return the string value.

I've created a basic example here, see errors in console after clicking on any Tag:

https://codesandbox.io/s/blueprint-sandbox-7jsb3?fontsize=14

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `nativeEvent` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

I would greatly appreciate a nudge in the right direction, much appreciated.

Solution

I think warning itself is self explanatory.

React has a pool of synthetic event, means it assigns a event to a handler and after the handler invokes it release that event back to the pool.

const handleTagClick = x => console.log(x);

In the above code x is nothing but the synthetic event which gets nullifies and released to event pool after your TagInput gets displayed on the screen.

So when you try to click, you are getting warning. The simple way to get rid of this warning is printing currentTarget.

const handleTagClick = x => console.log(x.currentTarget.innerText);

The above code will print the exact target which is clicked.

Another way is using event.persist(),

const handleTagClick = x => {
  x.persist();
  console.log(x.currentTarget.innerText);
}

But I think it will be very slow in your case, so don't use it.