Trying to get the data from Array, Received Error. I have passed data into the component
and accessing the data of pizza that is an Array. Please help to solve this mapping
Error. What doing wrong here in mapping ?
const mockJson = {
"pizza": [
{
"id": 0,
"name": "Margherita",
"description": "",
"ingredients": ["tomato sauce", "mozzarella"],
"spicy": false,
"vegetarian": true,
"price": 17.0,
"image": "https://i.imgur.com/8B8YLOo.jpg"
},
{
"id": 1,
"name": "Pepperoni",
"description": "",
"ingredients": ["tomato sauce", "mozzarella", "double pepperoni"],
"spicy": false,
"vegetarian": false,
"price": 20.0,
"image": "https://i.imgur.com/OHHctnf.jpg"
}
]
const RestaurantCard = (data) => {
console.log(data, 'data1') //data is reachable
return (
<>
<div className="res-card">
{console.log(helo, 'data2')}
{data.pizza?.map((helo,id) =>
{
return (
<p key={id}>{helo.name}</p>
<p key={id}>{helo.name}</p>
)
}
)}
</div>
</>
)
}
=================================
const Body = () => {
return (
<>
<div className="res-container"><RestaurantCard data={mockJson} />
</div>
</>
)
}
I’m unable to get {helo.name}, what wrong am i doing ?