Проблема со State в React Js

У меня есть локальный файл, который подгружается на страницу. Я добавляю его в state, чтобы модифицировать его до тех пор пока пользователь не обновит сайт (после обновления данные возвращаются в исходное состояние).

У меня выпадает постоянно ошибка, когда я нажимаю на кнопку:

TypeError: Cannot read property 'state' of undefined

Сами данные, которые в JSON отображаются, а после нажатия выпадает ошибка, что state не задан.

Код:

import React, {Component} from 'react';
import DishElement from "./DishElement";
import PropTypes from "prop-types";

import dataJson from "../../data/data.json";


class Category extends Component{

    constructor(props) {
        super(props);

        this.state = {
            dishes: dataJson
        };
    }

    openToggle(id) {
        this.state ? 
            console.log("не null") :
            console.log("null")
    }


    render() {
        let dishes = this.state.dishes
        return (
                <section className={[styles.container, styles.container_column].join(" ")}>
                    {dishes.map((dish, index) => {
                        return <DishElement dish={dish} key={dish.name} openToggle={this.openToggle}/>
                    })}
                </section>
        )
    }
}

Category.propTypes = {
    dishes: PropTypes.array
}


export default Category;

Ответы (1 шт):

Автор решения: Antonio112009

Ответ найден был тут

надо заменить openToggle={this.openToggle} на openToggle={(id) => this.openToggle(id)}

→ Ссылка