reactjs error : If you meant to render a collection of children,use an array instead

Question

So I'm trying to show the json data that I got and I succesfully show the data from "MenuRole" except data from "cmsmenuschild" array object.I'm tried my best to figure out how to show the from that it keep error all the time,does anyone know what's wrong with that or any other way to show the data inside "cmsmenuschild" in my json data?.any help would be really appreciate.

json data

 "MenuRole": [ { "id": 1, "name": "Manage User", "icon": "ion-person", "path_fe": "dashboard/user", "cmsmenuschild": [ { "name": "Create User", "cmsprivilegesroles": { "is_allowed": 1 } }, { "name": "Update User", "cmsprivilegesroles": { "is_allowed": 1 } }, ], }, ]

Sidebar.js

class Sidebar extends Component { constructor(props) { super(props); this.state = { MenuRole: [], }; } getMenus = () => { return this.state.MenuRole.map((role, index) => (<Menu.Item key={role.name}> <Link to={ { pathname: `/${role.path_fe}`, }} > <i className={role.icon} /> <span className="nav-text"> <span>{role.name}</span> <span>{role.cmsmenuschild.name}</span> <span>{role.cmsmenuschild[0].cmsprivilegesroles.is_allowed}</span> <span>{role.cmsmenuschild[1].cmsprivilegesroles.is_allowed}</span> </span> </Link> </Menu.Item>)); } render() { return( <div> {this.getMenus()} </div> ); } }

Richa Garg · Accepted Answer · 2018-06-24 09:16:57Z

The following line {role.cmsmenuschild.name} is incorrect as csmenuschild is an array and we don't know from which child to get the name. You can get it like this {role.cmsmenuschild[0].name} or {role.cmsmenuschild[1].name}.

However, this is not a good approach. You are statically accessing the csmenuschild array. There can be more than two children in this array. Hence, you should map over it as you are mapping over MenuRoles

thanks for your answer ,how do I should map over the csmenuschild? because I already mapping over MenuRoles,How to do it inside the MenuRoles map? @Richa Garg
You can write something like this: {role.csmenuschild.map(child => {child.name} )}

Akash Bhandwalkar · Accepted Answer · 2018-06-24 09:13:34Z

I think rewriting of getMenus function is neccessary. As we want to render the array of element from it. We should use array and push the element into it.

getMenus = () => { var elements = []; this.state.MenuRole.map((role, index) =>{ elements.push(<Menu.Item key={role.name}> <Link to={ { pathname: `/${role.path_fe}`, }} > <i className={role.icon} /> <span className="nav-text"> <span>{role.name}</span> <span>{role.cmsmenuschild.name}</span> <span>{role.cmsmenuschild[0].cmsprivilegesroles.is_allowed}</span> <span>{role.cmsmenuschild[1].cmsprivilegesroles.is_allowed}</span> </span> </Link> </Menu.Item>)) } return elements; }

Collectives™ on Stack Overflow

reactjs error : If you meant to render a collection of children,use an array instead

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related