Returns [Object object] instead Dom string in Reactjs

Question

var content = "";
for(var i=0;i<menuData.length;i++){           

 content += <li className={"accordion-menu-item "+showComponent} onClick={this.handleClick} id={menuTag}> 
     <div className={"menuLabel "+labelClassName}>{componentLabel}{manageActionLabel}</div>
     {allowDropDownElement}
     {this.createInnerComponent(allowDropDownFlag,innerComponents,showComponent)}
  </li>
}
return  <ul className="accordion-menu-wrapper">{content}</ul>

Above code is all put up in Reactjs. The above code is a code inside a function which is suppose to return the DOM string instead it return as [object object][object object][object object][object object]. Please help in solving this.

Answer 1

Instead of using content as a string use an array.

var content = [];
for(var i=0;i<menuData.length;i++){           

 content.push(<li className={"accordion-menu-item "+showComponent} onClick={this.handleClick} id={menuTag}> 
     <div className={"menuLabel "+labelClassName}>{componentLabel}{manageActionLabel}</div>
     {allowDropDownElement}
     {this.createInnerComponent(allowDropDownFlag,innerComponents,showComponent)}
  </li>);
}

return  <ul className="accordion-menu-wrapper">{content}</ul>

Demo