How to delete a ToDo Item onClick in React? : <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>
