title: React JS event.target.value sometimes null sometimes what it needs to be
body: <p>I have a table with the rows mapped from an array, and an edit button for each row. I have specified a value to every button using map(value, index).</p>
  <pre><code>var selected;
  
   handleUpdate = (e) =&gt; {
      e.persist();
      selected = filteredresults[e.target.value];
      this.setState({
        updateform: true,
        viewuser: false,
      });
    };
  
   &lt;Button
     type=&quot;button&quot;
     color=&quot;primary&quot;
     value={index}
     onClick={(e) =&gt; this.handleUpdate(e)}   Or   onClick={this.handleUpdate}
     style={{ width: &quot;5px&quot; }}&gt;
     &lt;EditIcon /&gt;
   &lt;/Button&gt;
  </code></pre>
  <p>When I click the button, <code>e.target.value</code> is sometimes null or undefined, and sometimes the index value.</p>
  <p>I read about event pooling in react, so I added <code>e.persist()</code> but the random behavior still remains.</p>
  <p>Why &quot;SOMETIMES&quot;? The expected behavior should be the same everytime.</p>