Im converting some HTML to ReactJS and I am trying to use the transform list functionality. What I mean: https://reactjs.org/docs/lists-and-keys.html
I would really appreciate some help.
The Error I am getting is: TypeError: Cannot read property 'map' of undefined The compiler is pointing to this line as the issue:
const menuPizzaList = props.pizzaItems.map((item) =>
Here is all the code in the file:
import React from 'react';
function PizzaList(props) {
const menuPizzaList = props.pizzaItems.map((item) =>
<div key={item.id}>
<br />
<h1><b>{item.title}</b><span className="w3-tag w3-red w3-round">{item.special}</span>
<span className="w3-right w3-tag w3-dark-grey w3-round">{item.price}</span></h1>
<p className="w3-text-grey">{item.about}</p>
</div>
);
return (
<div>
{menuPizzaList}
</div>
)
}
export default PizzaList;
The data is getting retrieved from an array:
//JSON object with menu items for pizza
const pizzaItems = [
{id:1, title:'Margherita', price:'$12.50', about: 'Fresh tomatoes, fresh mozzarella, fresh basil'},
{id:2, title:'Formaggio', price:'$15.50', about: 'Four cheeses (mozzarella, parmesan, pecorino, jarlsberg)'},
{id:3, title:'Chicken', price:'$17.00', about: 'Fresh tomatoes, mozzarella, chicken, onions'},
{id:4, title:'Pineapple"o"clock', price:'$16.50', about: 'Fresh tomatoes, mozzarella, fresh pineapple, bacon, fresh basil'},
{id:5, title:'Meat Town', special: 'Hot!', price:'$20.00', about: 'Fresh tomatoes, mozzarella, hot pepporoni, hot sausage, beef, chicken'},
{id:6, title:'Parma', special: 'NEW', price:'$21.00', about: 'Fresh tomatoes, mozzarella, parma, bacon, fresh arugula'}
];
And the data after gets passed into this
<PizzaList items={pizzaItems}></PizzaList>
itemsand not pizzaItems either change<PizzaList pizzaItems={pizzaItems}></PizzaList>or changethis.props.items.map(...)