Rendering Elements from Object Array in React

Question

I am trying to render the objects inside of an array using React. What I am trying to achieve is to create a menu which takes the nested Object as an input and return the objects. However, the return function on line 62 is not returning the const renderedItems

const renderedItems

which is supposed to render everything. Please let me know when am I going working. Any help would be appreciated.

<div id='root' class='container'></div>


<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>



<script type="text/babel">
    const starter = [{
            "Item": "Warm spiced olives & prosciutto ",
            "Price": "6",
            "DescriptionPrimary": "Description One",
            "DescriptionSecondary": "Description Two"
        },
        {
            "Item": "Crusty sourdough bread (2pc)",
            "Price": "9",
            "DescriptionPrimary": "with a choice of garlic butter or olive oil and balsamic vinegar",
            "DescriptionSecondary": "Description Two"
        },
        {
            "Item": "Tasmanian oysters 6 or 12",
            "Price": "12",
            "DescriptionPrimary": "Natural $20.90/$39",
            "DescriptionSecondary": "Kilpatrick(GF/DF) $24/$42"
        },
        {
            "Item": "Rainbow trout patÃ© (GF available)",
            "Price": "15",
            "DescriptionPrimary": "served with crusty sourdough",
            "DescriptionSecondary": "Description Two"
        }
    ];

    function MenuItem(props) {
        return (
            <div className="menu-item">
                <div className="item-title">
                    <div>{props.item}</div>
                    <div>{props.itemPrice}</div>    
                </div> 
                <div className="item-description">
                    <div>{props.itemDescriptionOne}</div>
                    <div>{props.itemDescriptionTwo}</div>
                </div>    
            </div>
        );
    }

    function ReturnMenu(props) {
        const numbers = props.numbers;
        const renderedItems = numbers.map((number) => {
            <MenuItem item={number.Item} itemPrice={number.Price} itemDescriptionOne={number.DescriptionPrimary} itemDescriptionTwo={number.DescriptionSecondary}/>
            console.warn("This was done")
        });
        
        // console.log(renderedItems.Item);

        return (
            <ul>{renderedItems}</ul>
        );
        // return "Task completed sucessfully!";
    }

    ReactDOM.render(
        <ReturnMenu numbers={starter} />,
        document.getElementById('root')
    );
</script>

Well, I answered first. – Praveen Kumar Purushothaman Nov 19 '20 at 09:47 — Praveen Kumar Purushothaman, Nov 19 '20 at 09:47

score 2 · Answer 1 · answered Nov 18 '20 at 22:03

If you look here, you forgot to return the value. Add a return before <MenuItem and put the console before it.:

const renderedItems = numbers.map((number) => {
  console.warn("This was done");
  return <MenuItem item={number.Item} itemPrice={number.Price} itemDescriptionOne={number.DescriptionPrimary} itemDescriptionTwo={number.DescriptionSecondary}/>;
});

score 2 · Accepted Answer · answered Nov 18 '20 at 22:04

Your problem is here:

 const renderedItems = numbers.map((number) => {
            <MenuItem item={number.Item} itemPrice={number.Price} itemDescriptionOne={number.DescriptionPrimary} itemDescriptionTwo={number.DescriptionSecondary}/>
            console.warn("This was done")
        });

You need to either return:

const renderedItems = numbers.map((number) => {
            return <MenuItem item={number.Item} itemPrice={number.Price} itemDescriptionOne={number.DescriptionPrimary} itemDescriptionTwo={number.DescriptionSecondary}/>
            console.warn("This was done")
        });

... or (my preferred option) remove the braces:

const renderedItems = numbers.map((number) => <MenuItem item={number.Item} itemPrice={number.Price} itemDescriptionOne={number.DescriptionPrimary} itemDescriptionTwo={number.DescriptionSecondary}/>);

Rendering Elements from Object Array in React

2 Answers2