Target value sometimes undefined

I loop my product list with map() and create a react component for each item.

      var ProductListItem = React.createClass({
        handleEvent: function(e) {
          console.log(e.target.value);
        },
        render: function() {
          return (
            <tr>
              <th>{this.props.id}</th>
              <th>{this.props.name}</th>
              <th>{this.props.quantity}</th>
              <th>
                <button type="button" className="btn btn-default btn-sm" value={this.props.id} onClick={this.handleEvent}>
                  <span className="glyphicon glyphicon-search" aria-hidden="true"></span>
                </button>
              </th>
            </tr>
          );
        }
      });

When I click on the button sometimes the e.target.value is defined and sometimes undefined. Its totally random. After clicking on the button 50 times, the value sets magically undefined.

[sophiebits]

Wait, what? e.target is correctly the button or the span in my testing. If you want the button, you do definitely want e.currentTarget.value.

[sophiebits]

It looks like a bug that this is undefined, but after we fix it it’ll be the span element which probably isn’t what you want. You want e.currentTarget.value to get the button, which already works correctly.