React products from JSON crash on mapping function

Question

I've made a menu items application which shows products from json file, whenever an item is clicked, it shows some modifiers of that item, I am working with a nested json, and the application works well and then crashes when some categories or items are clicked, you can test it by clicking on items from "pizzas" and "offers", and some categories crash from the same problem such as "desserts" and "sides".

I am not sure how can I fix such a problem I am still new to react, would appreciate any help on this, below is the sandbox link, most of the functions are within Itemlist.js, and the modifier props are within the modifier.js which is called in itemlist.js

Items under burgers and sets category works just fine, the rest of the categories only the first item works and the rest crashes. Try clicking on items under the last categories, such as offer 2 and offer 3, it will stop working. I think because the json structure is a bit heterogeneous so in the mapping function it asks for children of items that don't have children so it crashes, and the items that do have children shows whenever clicked on. not sure how can i overcome this.

Live snippet: https://codesandbox.io/embed/1ozwnonr93?fontsize=14

Answer 1

You have need to remove the some props from modifiers component, please find on the below:-

• childId={item.children[index].id}
• childp={item.children[index].name}
• childprice={item.children[index].base_price}
• img={item.children[index].image_url}

because you can click on item dessert, it's having index value 4 but dessert children's length are 2 when you can use this line "item.children[index]", it will give the error because index = 4 and children are not having 4 index.

• childprice={item.children[index].base_price}
• img={item.children[index].image_url}

above these two lines are use less because modifiers component are not using props childprice and img.

Please find the update code:-

**ItemList.js:-**

    <div>
      {items.children[this.state.selected].children[
         this.state.itemSelected
         ].children.map((item, index) => (
           <Modifiers
              key={index}
              title={item.name}
              myKey={index}
              options={item.children}
           />
      ))}
   </div>