Как исправить индекс вызова в обработчике события, возвращающего NaN в реаги?

Question

При вызове индекса для обработчика события handleRemoveItem (event), индекс тега span возвращает NaN при попытке parseInt (event.target.id)

Я пытаюсь создать простую программу ReactJSкоторый заполнит div данными, введенными пользователем, и затем может быть удален нажатием на div

Следующий код является компонентом, который экспортируется в файл index.js

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 = () => {
    this.setState({ data: [] });
  };

  handleButtonClick(event) {
    if (this.state.text.length > 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) => (
      <span onClick={this.handleRemoveItem.bind(this)} id={index}>
        {" "}
        <div key={index}> {elem} </div>{" "}
      </span>
    ));
    return (
      <div className="App">
        <h1>Dynamic Div</h1>
        <h2>Sort and filter</h2>
        Enter text:&nbsp;
        <input
          type="text"
          value={this.state.text}
          onChange={e => this.handleInputChange(e)}
        />
        &nbsp;
        {/*console.log(data) */}
        <button onClick={this.handleButtonClick.bind(this)}>Add</button>
        &nbsp;
        <button type="button" onClick={this.clearTheArray}>
          {" "}
          Reset{" "}
        </button>
        <br />
        {list}
      </div>
    );
  }
}

Iожидайте, что сможете щелкнуть элемент на странице и увидеть, как он удаляется.Однако первый элемент удаляется, когда я щелкаю по любому из элементов, а не по тому, который щелкнул.Я считаю, что это проблема с моей индексацией, но я не могу понять, что ее вызывает