CODEWITHSUNDEEP
javascriptreactjs
user5780883
user5780883

Reputation:

React - .map not returning items in object

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?

Upvotes: 2

Views: 730

Answers (1)

Icepickle
Icepickle

Reputation: 12796

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() );

Upvotes: 1

Related Questions