title: How to delete a ToDo Item onClick in React?
body: <p>I'm doing a simple todo app with React, just to practise. How can I delete a list item, when clicking on it? </p>
  
  <p>Here is my todos.js</p>
  
  <pre><code>export default class Todos extends Component {
      constructor(props) {
          super(props);
          this.state = { todos: [], text: '' };
      }
  
      addTodo(e) {
          e.preventDefault();
          this.setState({ todos: [ this.state.text, ...this.state.todos ] });
          this.setState({ text: ''});
      }
  
      updateValue(e) {
          this.setState({ text: [e.target.value]})
      }
  
      render() {
          return(
              &lt;div&gt;
                  &lt;form onSubmit = {(e) =&gt; this.addTodo(e)}&gt;
                      &lt;input
                          placeholder="Add Todo"
                          value={this.state.text}
                          onChange={(e) =&gt; {this.updateValue(e)}}
                      /&gt;
                      &lt;button type="submit"&gt;Add Todo&lt;/button&gt;
                  &lt;/form&gt;
                  &lt;TodoList todos={this.state.todos}/&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>And here is the TodoList.js, where I'm trying to remove a list item from. </p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  
  export default class TodoList extends Component {
      removeItem(e) {
          // splice this.props.todos??
      }
      render() {
          return(
              &lt;ul&gt;
                  { this.props.todos.map((todo) =&gt; {
                      return &lt;li onClick={(e) =&gt; { this.removeItem(e)}} key={todo}&gt;{ todo }&lt;/li&gt;
                  })}
              &lt;/ul&gt;
          );
      }
  }
  </code></pre>