title: React - create a delete button that removes it's DOM parent and corresponding state item
body: <p>I have a basic todo list and I am not sure how to add a delete button to each todo. In conventional DOM programming I would just add an event listener to the button and delete the parent and respective array index data. With React, I am not so sure how to structure this. </p>
  
  <p>My problem is:</p>
  
  <ol>
  <li>just getting it working</li>
  <li><p>Knowing how to (and if) I should create a new component for this feature.</p>
  
  <pre><code>var TodoItems = React.createClass({
  
    render: function() {
        var attr = this.props
        var todoEntries = attr.entries;
  
  
  
        var listItems = todoEntries.map((item) =&gt; {
            return &lt;li key={item.key}&gt;{item.text} &lt;input type="button" value="DELETE"&gt;&lt;/input&gt;&lt;/li&gt;
        });
  
        return (
            &lt;ul className="theList"&gt;
              {listItems}
          &lt;/ul&gt;
        );
    }
  
  });
  
  
  var TodoList = React.createClass({
      getInitialState: function() {
          return {
              items: []
          };
      },
  
    addItem: function(e) {
        var itemArray = this.state.items;
  
        itemArray.push({
            text: this._inputElement.value,
            key: Date.now()
        });
  
        this.setState({
            items: itemArray
        });
  
        this._inputElement.value = "";
  
        e.preventDefault();
    },
  
    render: function() {
  
        return (
            &lt;div className="todoListMain"&gt;
            &lt;div className="header"&gt;
              &lt;form onSubmit={this.addItem}&gt;
                &lt;input ref={(a) =&gt; this._inputElement = a}
                 placeholder="enter task"&gt;
                &lt;/input&gt;
                &lt;button type="submit"&gt;add&lt;/button&gt;
              &lt;/form&gt;
            &lt;/div&gt;
  
            &lt;TodoItems entries={this.state.items}/&gt;
  
          &lt;/div&gt;
        );
    }
  });
  
  
  
  
  var destination = document.querySelector("#container");
  
  ReactDOM.render(
    &lt;div&gt;
      &lt;TodoList/&gt;
    &lt;/div&gt;,
    destination
  </code></pre>
  
  <p>);</p></li>
  </ol>