Как вызвать метод класса в react из функции map в render?

Question

[Николай Еремеев]

Как мне вызвать функцию deletePoint из функции map в методе render? Спасибо за ваши ответы!

Текст ошибки сейчас: TypeError: Cannot read property 'deletePoint' of undefined

class SideBar extends Component {

    deletePoint = (obj) => { ... }

    render() {
        const points = this.props.markers;
        const point = points.map(function (obj, index) {
            return (
                <li key={index}>
                    {obj.address}
                    <button onClick={this.deletePoint(obj)}>Удалить точку</button>
                </li>
            )
        })

        return (
            <div>
                <div>
                    <ol>{point}</ol>
                </div>
            </div>
        )
    }
}

Answer 1

[Антон Спирин]

Заменить колбек на стрелочную функцию:

const point = points.map((obj, index) => (
  <li key={index}>
    {obj.address}
    <button onClick={this.deletePoint(obj)}>Удалитьточку</button>
  </li>
));

Answer 2

[Николай Еремеев]

Спасибо! Разобрался))

class SideBar extends Component {


    deletePoint = (obj) => {
        
        const text = 'Вы хотите удалить точку маршрута \'' + obj.address + '\'?';
        const result = window.confirm(text);

        if(result) {

            const markers = this.props.markers,
                routes = this.props.routes;

            for (let i = 0; i < markers.length; i++) {
                if (markers[i].address === obj.address) {
                    markers.slice(i,1);
                    routes.slice(i,1);
                }
            }

            this.props.deleteRoute(markers, routes)
        }
    }


    render() {
        const points = this.props.markers;
        const point = points.map((obj, index) => (
                <li key={index}>
                    {obj.address}
                    <button onClick={this.deletePoint.bind(this, obj)}>Удалить точку</button>
                </li>
            )
        )

        return (
            <div>
                <div>
                    <ol>{point}</ol>
                </div>
            </div>
        )
    }
}