React render string as HTML in ant design

user_3103101 0
Viewed 465

I'm using ant design dropdown. I have dynamic data from API and when I try to render those data into dropdown menu, It is rending as string.

So I used this react-html-parser library to render string as HTML but it does not work.

renderSocialMedia = () => {
if (this.props.weblookup) {
  let socialmedialookup = this.props.weblookup
  webitems = ""
  return socialmedialookup.map((k, index) => {
    if (k.name.toLowerCase() != "other")
      return webitems = "<Menu.Item key=" + k.id + ">" + k.name + "</Menu.Item>"
  })
 }
}

{ReactHtmlParser(webitems)}

<FormItem>
 {getFieldDecorator('AddNetwork', {
  initialValue: "",
 })(
 <Dropdown overlay={
  <Menu onClick='{this.handleMenuClick}'>
    <div>{ReactHtmlParser(webitems)}</div>
  </Menu>
} trigger={['click']}>
 <a className="ant-dropdown-link" href="#">
  Add Username 
  <Icon type="down" />
 </a>
</Dropdown>
)}

OUTPUT:

enter image description here

reactjs render javascript
1 Answers

As you're using React you must properly format a DOM element. So, Try this,

return webitems = <Menu.Item key={ k.id }>{ k.name}</Menu.Item>

Hope it helps. Happy Coding!!

user_95114300
Related