Danny Dyer Danny Dyer - 1 year ago 94
React JSX Question

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) => {
<li key={menuItem.catId}>
<a href="#">{menuItem.parentCat}</a>


This is the object i'm trying to map:

export default
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?

Answer Source

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() {
    "hello world";

function testFunctionCorrect() {
  return "hello " + 

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download