CODEWITHSUNDEEP
reactjsantd
user8716887
user8716887

Reputation:

Antd: Setting menu items with state property

The mapping method doesn't work for rendering sub menu items.

The state in this class.

class SideBar extends React.Component {
    constructor(props) {
    super(props);
    this.state = { fruits:["orange","peach","grape"] };

    }

The rendering part of this class.

<Menu>
<SubMenu 
   key="sub1" 
   title={<span><Icon type="mail" />
   <span>User-list</span></span>}>

   {this.state.fruits.map(function(item, i){
     <Menu.Item key={i}>{item}</Menu.Item>
   })}

</SubMenu>
</Menu>

Upvotes: 1

Views: 868

Answers (1)

Clafouti
Clafouti

Reputation: 4595

You're not returning anything from your function inside your map. See this example: https://codesandbox.io/s/73w271now6?fontsize=14

{this.state.fruits.map(function(item, i) {
  return <Menu.Item key={i}>{item}</Menu.Item>;
})}

You can also create an arrow function there and omit the return keyword because you only have one line of code (you can read this if you want more info about arrow functions), like this:

{
  this.state.fruits.map((item, i) => <Menu.Item key={i}>{item}</Menu.Item>)
}

Upvotes: 1

Related Questions