Newbie to React : Any help would be greatly appreciated - reactjs

Question

I am doing a code challenge and am very new to React. I am used to hard coding things, and I need to loop in data from a JS file. I am familiar with HTML and CSS so styling will be no problem, but how I can pull in the data from the menu items without hardcoding. Below are links to what I have in the project files as well as a reference as to what it should look like. Thanks!
[1]: https://i.stack.imgur.com/JtE4X.png
[2]: https://i.stack.imgur.com/n412K.png
[3]: https://i.stack.imgur.com/ZVSl2.png

Answer 1

Here's a simplified example
Interactive sandbox
https://codesandbox.io/s/lucid-lovelace-kr6rr?fontsize=14&hidenavigation=1&theme=dark
Here's the code:
function myComponent() {
// Here's your data
// You'll probably want to set this to state after fetching it
// (It doesn't need to be in a const)
const myList = [
"https://i.stack.imgur.com/JtE4X.png",
"https://i.stack.imgur.com/n412K.png",
"https://i.stack.imgur.com/ZVSl2.png"
];
// map over your data
// here we are rendering an html img for each item
// and we give each a key to help react keep a record of what is has rendered
return (
<div>
{myList.map(url => <img src={url} key={url} />)}
</div>
)
}
Hope it helps!

Answer 2

On line 19, try
let menuItems = this.state.menuItems.map((item) => {
<MenuItem name={item.name} img={item.imageName} price={item.details.price} />
}
Then in your return,
<div id="combo-header">
<h1>Combo Meals</h1>
{menuItems}
</div>
You can also choose to loop within your render instead of assigning to its own menuItem variable.
<div id="combo-header">
<h1>Combo Meals</h1>
{this.state.menuItems.map((item) => {
<MenuItem name={item.name} img={item.imageName} price={item.details.price} />
}}
</div>
Note that the second option requires the javascript to be wrapped in {} so that you can write javascript directly in the JSX.
After this, you'd write a MenuItem component that would intake the props above.
You will also have to perform a check that the array is not empty before mapping over it, or there will be errors.