0

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>    

1
  • You are passing the data as items and not pizzaItems either change <PizzaList pizzaItems={pizzaItems}></PizzaList> or change this.props.items.map(...) Commented Dec 1, 2019 at 19:20

1 Answer 1

1

Change <PizzaList items={pizzaItems}></PizzaList> To <PizzaList pizzaItems={pizzaItems}></PizzaList>

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.