Chức năng Delete cho ứng dụng React

Theo mình thì bạn dùng props để truyền dữ liệu từ App.js thì ở bên Dishes.js ở trong constructor bạn phải gán giá trị cho nó chứ. Bởi lúc này khi bạn chưa gán giá trị thì state của bạn = null nên khi delete nó không có data thì sẽ xảy ra lỗi ở trên. Mình có sửa lại một chút bạn xem qua nhé

Mình đã xem code của bạn, và thấy có khá nhiều vấn đề:
+, Thứ 1: Bạn có thể tạo state dữ liệu ngay trong file Disher.js để việc thao tác thêm, sửa, xóa được dễ dàng hơn
+, Thứ 2: Nếu bạn muốn tạo bộ dữ liệu dishes (như cách mà bạn để trong file App.js, mình hiểu rằng bạn muốn dùng bộ dữ liệu này cho nhiều component khác nhau đúng không)...
=> Nếu vậy bạn có thể dùng như cách mình làm là dùng function componentDidMount() của react để lấy dữ liệu props gửi sang và lưu nó trong state mới được tạo trong Disher.js Bạn có thể tham khảo code mình đã sửa nhé... Trong source code này mình mới chỉ sửa show dữ liệu và xóa... Bạn có thể áp dụng cho chức năng thêm và sửa...
Link nè: https://github.com/vanquynguyen/FCCRecipe

import React from 'react';
import Dish from './Dish';

class Dishes extends React.Component {
    constructor(props){
        super(props);
        //Trong component này, Khởi tạo state ban đầu là rỗng.
        this.state = {
            dishes: {}
        }
    }
    
    componentDidMount() {
        // Trong lần render đầu tiên, props được lưu ngay trong state tại component này
        var dishes = this.props.dishes
        this.setState({
            dishes: dishes
        })
    }

    deleteDish(dishName){
        let dishes = this.state.dishes.slice();

        dishes.forEach((dish, index) => {
            if (dish.dishName === dishName) {
                dishes.splice(index, 1);
            }
        });

        this.setState({
            dishes: dishes
        });
    }

    render() {
        var data = this.state.dishes
        let dishes
        if(data.length > 0) {
            dishes = data.map((dish, index)=> {
               return <Dish key={index} dishName={dish.dishName} ingredients={dish.ingredients} deleteDish={this.deleteDish.bind(this)} />
            })
        }

        return(
            <div className="row">{dishes}</div>
        );
    }
}

export default Dishes;

*Hiển thị dữ liệu ra từ state (bạn hãy yên tâm rằng dữ liệu trong state được mapping từ dữ liệu props truyền sang, điều này có nghĩa là: dữ liệu dishes bên component cha: App.js thay đổi thì dữ liệu trong state tại component này cũng thay đổi nhé).*