React: Target value sometimes undefined

[mnlfischer]

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]

Can you post a small reproducible example in https://react.jsbin.com/ or jsfiddle? I can't help you unless you give more information.

[mnlfischer]

https://jsbin.com/zekixo/
click the plus button and check console output.

[jimfb]

Bug occurs when the click target is the glyph instead of the button. Original browser mouse event has target correctly set, synthetic event does not have the target set. Reproducible in both 0.13 and 0.14.

[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.

[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.

[horaciogithub]

Oh my God, I love you sophiebits, I have been fighting against this issue for weeks and did not find any solution, thanks a lot!! :)

[srinivas-goli]

@sophiebits Thansk a lot!! it's working ..

[gejimayu]

@sophiebits saves my life, thanks

[konstantinkrumin]

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.

Ohh thank you so much, @sophiebits ! I was quite confused when my console was randomly giving 'undefined' when buttons clicked