React - .map not returning items in object

Question

Im new to React and have an issue with my .map function:

I have a component with the following render function:

render() {
    return <div className="sidenav-cont"><ul className="top-level-menu">
            {
                this.props.loadSidenavItems.map((menuItem) => {
                    console.log(menuItem.parentCat)
                return              
                    (
                    <li key={menuItem.catId}>
                        <a href="#">{menuItem.parentCat}</a>
                    </li>
                    )
                })
            }

    </ul>
</div>
    }

This is the object i'm trying to map:

export default 
     [
            {
            catId:"parMenu1",
            parentCat:"Genres",
        },
        {
            catId:"parMenu2",
            parentCat:"Sound Type",
        },
    ]

My console log returns the two values I want which is great but my no list items get rendered to the DOM. Not sure where i've gone wrong here?

maybe the newline directly after the return (there can be some side effects if a newline is before any other statements) — Icepickle
– Icepickle, Commented Oct 17, 2016 at 13:00

Icepickle · Accepted Answer · 2016-10-17 13:34:41Z

1

It can be a bit stupid, but return has to be followed by a statement or many javascript engines will simply assume you forgot a ;

See following example where you would expect twice hello world, but get undefined once

A better explanation is given here

Automatic Semicolon Insertion
The return statement is affected by automatic semicolon insertion (ASI). No line terminator is allowed between the return keyword and the expression.

function testFunctionIncorrect() {
  return
    "hello world";
}

function testFunctionCorrect() {
  return "hello " + 
    "world";
}

console.log( testFunctionIncorrect() );
console.log( testFunctionCorrect() );

edited Oct 17, 2016 at 13:34

answered Oct 17, 2016 at 13:03

Icepickle

12.8k3 gold badges38 silver badges51 bronze badges

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

Collectives™ on Stack Overflow

React - .map not returning items in object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related