Meal Maker (React.JS course) error

Hi,

My code is throwing an error of maximum call stack size exceeded on line 26 under get _courses() { return {…}

Since writing the code for this part of the course I have gone through the video tutorial however my code seems to line up with what is in the tutorial. I’m assuming it’s causing an infinite loop but i don’t understand why!

Can anyone shed any light on why the error is occurring despite the my and the tutorial code being near identical?

Code as follows:

const menu = {

  _courses: {

appetizers: [],

mains: [],

desserts: []

  },

  get appetizers(){

    return this._courses.appetizers;

  },

  get mains() {

    return this._courses.mains;

  },

  get desserts() {

    return this._courses.desserts;

  },

  set appetizers(appetizers) {

this._courses.appetizers = appetizers;    

  },

  set mains(mains) {

this._courses.mains = mains;

  },

  set desserts(desserts) {

    this._courses.desserts = desserts;

  },

  get _courses() {

    return {

      appetizers: this.appetizers,

      mains: this.mains,

      desserts: this.desserts,

    };

  },

addDishToCourse(courseName, dishName, dishPrice){

const dish = {

name: dishName,

price: dishPrice,

};

return this._courses[courseName].push(dish);

},

getRandomDishFromCourse(courseName) {

const dishes = this._courses[courseName];

 const random = Math.floor(Math.random() * dishes.length);

 return dishes[random];

},

generateRandomMeal(){

const appetizer = this.getRandomDishFromCourse('appetizers');

const main = this.getRandomDishFromCourse('mains');

const dessert = this.getRandomDishFromCourse('desserts');

const totalPrice = appetizer.price + main.price + dessert.price;

return `Your meal is ${appetizer.name}, ${main.name}, ${dessert.name}.

The total cost will be ${totalPrice}`;

}

};

menu.addDishToCourse('appetizers', 'salad', 4.00);

menu.addDishToCourse('appetizers', 'Scollops', 10.00);

menu.addDishToCourse('appetizers', 'sharing platter', 15.00);

menu.addDishToCourse('mains', 'Steak', 20.00);

menu.addDishToCourse('mains', 'Fish', 15.00);

menu.addDishToCourse('mains', 'Vegi', 12.50);

menu.addDishToCourse('desserts', 'Brownie', 5.00);

menu.addDishToCourse('desserts', 'Sticky Toffee', 4.50);

menu.addDishToCourse('desserts', 'Ice Cream', 4.20);

const meal = menu.generateRandomMeal();

console.log(meal);

your property:

  _courses: {

and getter:

  get _courses() {

have the same name, this is problematic, this leads to recursion until the maximum depth is reached

Thank you!!!

This has been bugging me all night! :smiley: