What is the right way to define data structure of category and subcategory ?

[Deepak8717]

Hi,
I have list of categories and subcategories for example

  Mealtype
        Breakfast
        Lunch
        Dinner

  Cusinetype
       American
       British
       Chinese 
       Indian
       French

   Dishtype
      Side Dish
      Soup
      Starter
      Sweets

Now i have to make menu component that renders the category along with subcategory and i have two question.

1. What is the right way to define the data structure ?

array of objects containing array values ?

 const menu = [
    mealType: ["breakfast", "Lunch", "Snack", "teatime"],
    cuisineType: [
      "merican",
      "asian",
      "british",
      "caribbean",
      "central europe",
      "chinese",
      "eastern europe",
      "french",
    ],
    dishType: ["side dish", "soup", "starter", "sweets"],
  ]

or objects of objects containing array values

const menu = {
    mealType: ["breakfast", "Lunch", "Snack", "teatime"],
    cuisineType: [
      "merican",
      "asian",
      "british",
      "caribbean",
      "central europe",
      "chinese",
      "eastern europe",
      "french",
    ],
    dishType: ["side dish", "soup", "starter", "sweets"],
  }

2. My second question, what if i also want to have an icon component stored inside each category like this

 const Menu = [
    mealType: ["breakfast", "Lunch", "Snack", "teatime", { icon: <GiMeal /> }],
    cuisineType: [
      "merican",
      "asian",
      "british",
      "caribbean",
      "central europe",
      "chinese",
      "eastern europe",
      "french",
      { icon: <SiCodechef /> },
    ],
    dishType: ["side dish", "soup", "starter", "sweets", { icon: <BiDish /> }],
  ]

I'm more concerned about the second question

[atapas]

Hi @Deepak8717

I didn't get completely about the categories and subcategories there. Are you saying, the user will first select a mealType and for that, they have to select a cusineType and for a specific mealType and cusineType, there will be a list of dishType? Could you please tell me how are they related? Then we can build a better data structure.

For the second question of having the icon(component reference) as part of the data, I do not see that as an issue.

[Deepak8717]

@atapas , No they are all independent. anyway i have achieved this but i wasn't able to store component it keeps giving me errors. If you could point out some resource on how to store component especially icons as some icons do give this freedom like material but not all. this time i did this with help of ternary operator as there were only three icons.

[atapas]

If you could point out some resource on how to store component especially icons as some icons do give this freedom like material but not all.

Check out the play-meta file. It already does have the similar code: https://github.com/atapas/react-play/blob/9c9a67f48c11f6ad30493203cc5ce1c643baa2cd/src/meta/play-meta.js#L30