React - TypeError: Impossible de lire la propriété 'props' d'undefined

Question

J'essaie de créer un événement de clic pour pouvoir supprimer un élément de ma liste, mais quand je clique dessus, j'obtiens "TypeError: Impossible de lire la propriété 'props' d'undefined".

J'essaie de m'en tenir à ES6 autant que possible, et je suis sûr que c'est quelque chose à faire pour lier "ceci" quelque part, mais j'ai essayé de nombreux endroits et j'ai échoué.

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    render() {
        return (
            <div className="App">
                <StreetFighter />
            </div>
        );
    }
}

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) => {
            return (
                <Character char={char} key={index} onDelete={this.onDelete} />
            );
        });
        return (
            <div>
                <p>Street Fighter Characters</p>
                <ul>{characters}</ul>
            </div>
        );
    }
    onDelete(chosenCharacter) {
        let updatedCharactersList = this.state.characters.filter(
            (char, index) => {
                return chosenCharacter !== char;
            }
        );

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

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

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


export default App;

Answer 1

En utilisant la fonction flèche, vous pouvez résoudre le contexte this. Essaye ça:

Votre événement onClick onClick={this.handleDelete}

et votre définition de fonction:

handleDelete = () => {
    //here you can access the this.props
}