React - TypeError: Cannot read property 'props' of undefined : <p>I'm trying to create a click event be able to delete an item on my list, but when I click it I get "TypeError: Cannot read property 'props' of undefined".</p>

<p>I'm trying to stick to ES6 as much as possible, and I'm pretty sure its something to do binding 'this' somewhere, but I've tried many places and been unsuccessful.</p>

<pre><code>import React, { Component } from 'react';
import './App.css';

class App extends Component {
    render() {
        return (
            &lt;div className="App"&gt;
                &lt;StreetFighter /&gt;
            &lt;/div&gt;
        );
    }
}

class StreetFighter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            characters: [
                'Chun-Li',
                'Guile',
                'Ryu',
                'Ken',
                'E.Honda',
                'Dhalsim',
            ],
        };
    }
    render() {
        let characters = this.state.characters;
        characters = characters.map((char, index) =&gt; {
            return (
                &lt;Character char={char} key={index} onDelete={this.onDelete} /&gt;
            );
        });
        return (
            &lt;div&gt;
                &lt;p&gt;Street Fighter Characters&lt;/p&gt;
                &lt;ul&gt;{characters}&lt;/ul&gt;
            &lt;/div&gt;
        );
    }
    onDelete(chosenCharacter) {
        let updatedCharactersList = this.state.characters.filter(
            (char, index) =&gt; {
                return chosenCharacter !== char;
            }
        );

        this.setState({
            characters: updatedCharactersList,
        });
    }
}

class Character extends Component {
    render() {
        return (
            &lt;li&gt;
                &lt;div className="character"&gt;
                    &lt;span className="character-name"&gt;{this.props.char}&lt;/span&gt;
                    &lt;span
                        className="character-delete"
                        onClick={this.handleDelete}
                        &gt; x &lt;/span&gt;
                &lt;/div&gt;
            &lt;/li&gt;
        )
    };

    handleDelete() {
        this.props.onDelete(this.props.char);
    }
}


export default App;
</code></pre>
