event.currentTarget.value returns undefined in React 16

 "react": "^16.2.0",
 "react-dom": "^16.2.0"

Just upgraded to react 16 from 15.0.2, and using event currentTarget.value will give me undefined. Basically I have a stateless child component that will fire the callback when it’s clicked, and will pass an extra params through DOM API value field

 <a className="btn-sm" onClick={onDelete} value={data}>
   <i className="fa fa-trash" aria-hidden="true" />
 </a>

And in my parent component the callback is as follows, the param is not accessible in 16 anymore

  onDelete(event) {
    const data = event.currentTarget.value;  //works in react 15.0.2, but returns undefined in 16
    ...
  }

So I looked into the event that is being returned in both versions of React, looks like in 16 the _dispatchInstances is a FiberNode, whereas in 15 is a ReactDOMComponent React 16

React 15

Is this an intentional change? If so, how do I go about passing this params to the callback? I don’t really want to use arrow functions since that affects the performance

[jcald1]

event.currentTarget.getAttribute(‘value’) also seems to work.

[jeansaigne]

Hi there, i just went through the same problem asking myself what was wrong with me. Looking at official React documentation you have to use event.persist() on SyntheticEvent in order the target property to be filled correctly; this is because it’s an asynchronous way to handle events and so, its values are only promise before doing “event.persist()”.

There is a better way to handle it: use destructuring on the event object. Instead of referencing the event parameter as (event) => {...} you can reference its target directly using desctructuring as follow: ({ target }) => {...}