Menu App Lab 4 project. I need help finishing the other half

user_15317758 0
Viewed 27

enter image description hereSo I have done through the halfway mark of displaying my menu, I am getting stuck displaying the other part of the menu within the same page. Having trouble displaying the other part of the array which would be the dessert part. The image is suppose to be what is to be displayed on the React Browser but I'm only get the items Lasagne, Raviloi and Chicken Parmesan.

This is the App.js

import './App.css';

import MenuApp from './components/MenuApp'

const dinnerData = [
 {
"menuName": "Dinner",

"menuItems": [
  {
    "itemId": 1,
    "itemPrice": "12",
    "itemName": "Lasagne",
    "itemDescription": "Meat and cheese layered between house-made pasta with bell peppers and onions."
  },
  {
    "itemId": 2,
    "itemPrice": "10",
    "itemName": "Cheese Ravioli",
    "itemDescription": "Cheese-filled ravioli served with house red sauce."
  },
  {
    "itemId": 3,
    "itemPrice": "14",
    "itemName": "Chicken Parmesan",
    "itemDescription": "Breaded chicken topped with marinara sauce and lots of cheese served over house made spaghetti."
  }
]

},

  {
    "menuName": "Dessert",

"menuItems": [
  {
    "itemId": 45,
    "itemPrice": "10",
    "itemName": "Chocolate Lava Cake",
    "itemDescription": "Dark chocolate molten lava cake. Serves 2-3."
  },
  {
    "itemId": 47,
    "itemPrice": "8",
    "itemName": "Tiramisu",
    "itemDescription": "Layers of espresso-soaked ladyfingers and marscarpone cream topped with cocoa and espresso powder."
  },
  {
    "itemId": 49,
    "itemPrice": "5",
    "itemName": "Cannolis",
    "itemDescription": "Three flaky pastries enclosing a rich, ricotta filling dotted with decadent chocolate chips."
  },
  {
    "itemId": 50,
    "itemPrice": "5",
    "itemName": "Cappuccino",
    "itemDescription": "Steamed milk with two ristretto shots of espresso."
  }
]
   }
 ]
 function App() {
  return (
<div className="App">
  <MenuApp data={dinnerData} ></MenuApp>
</div>
  );
}
export default App;

This is the index.js for the Menu folder which is what is helping me display on the web browser

import MenuItem from "../MenuItem"
function MenuApp(props) {

let menuItems = (props.data[0].menuItems.map((i, index) => <MenuItem key={index} {...i}></MenuItem>))

return (
    <div className="App">
        {menuItems}
    </div>
    )
}

export default MenuApp
react-props reactjs mobile-application arrays
1 Answers

You may try changing the MenuApp to something like so:

import MenuItem from "../MenuItem"
function MenuApp(props) {

const getMenuItems = menuIdx => (
  props.data[menuIdx].menuItems.map(
    (i, index) => (
      <MenuItem
        key={index}
        {...i}
      />
    )
  )
);

return (
    <div className="App">
        {props &&
         props.data &&
         props.data.map(
           (d, idx) => (<div>
             <p>Menu: {d.menuName}</p>
             <div key={idx} id={'menuItems'}>
               {getMenuItems(idx)}
             </div>
           </div>)
        }
    </div>
    )
}

export default MenuApp;
user_136588160
Related