title: How to fix calling index in event handler returning NaN in react?
body: <p>When calling index for the event handler handleRemoveItem(event), the index of the span tag returns NaN when trying to parseInt(event.target.id)</p>
  
  <p>I'm trying to create a simple ReactJS program that will populate div's with user entered data, and then can be deleted by clicking on the div</p>
  
  <p>The following code is a component that is exported to the index.js file</p>
  
  <pre><code>import React from "react";
  import "./styles.css";
  
  export default class DivList extends React.Component {
    constructor(props) {
      super();
      this.state = { text: "", filter: "", data: [] };
    }
  
    handleInputChange(event) {
      let text = event.target.value;
      this.setState({ text });
    }
  
    clearTheArray = () =&gt; {
      this.setState({ data: [] });
    };
  
    handleButtonClick(event) {
      if (this.state.text.length &gt; 0) {
        let data = this.state.data.slice();
        data.push(this.state.text);
        let text = "";
        // TODO: Update state with data and text
        this.setState({ text });
        this.setState({ data });
      }
    }
  
    handleRemoveItem(event) {
      let newIndex = parseInt(event.target.id, 10);
      console.log(event.target.id + " is the actual index");
      let dataCopy = this.state.data.slice();
      console.log(newIndex + " is the index");
      dataCopy.splice(newIndex, 1);
      this.setState({ data: dataCopy });
    }
  
  
    render() {
      let data = this.state.data.slice();
      let list = data.sort().map((elem, index) =&gt; (
        &lt;span onClick={this.handleRemoveItem.bind(this)} id={index}&gt;
          {" "}
          &lt;div key={index}&gt; {elem} &lt;/div&gt;{" "}
        &lt;/span&gt;
      ));
      return (
        &lt;div className="App"&gt;
          &lt;h1&gt;Dynamic Div&lt;/h1&gt;
          &lt;h2&gt;Sort and filter&lt;/h2&gt;
          Enter text:&amp;nbsp;
          &lt;input
            type="text"
            value={this.state.text}
            onChange={e =&gt; this.handleInputChange(e)}
          /&gt;
          &amp;nbsp;
          {/*console.log(data) */}
          &lt;button onClick={this.handleButtonClick.bind(this)}&gt;Add&lt;/button&gt;
          &amp;nbsp;
          &lt;button type="button" onClick={this.clearTheArray}&gt;
            {" "}
            Reset{" "}
          &lt;/button&gt;
          &lt;br /&gt;
          {list}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I expect to be able to click on a  element on the page, and see it get deleted. 
  However, the first  element gets deleted when I click any of the  elements, instead of the one I clicked. I believe this is a problem with my indexing but I can't figure out what's causing it</p>