Ad

Getting A Warning In Console When Using Material UI Menu. Suggest Me Solution. I Am Using HTML In Text Object

- 1 answer

Warning: Failed propType: Invalid prop text of type object supplied to LinkMenuItem, expected string. Check the render method of Menu

Here is my Code

var menuItems = [ // text is not valid text
  { route: 'test1', text: <div className="sideMainNav User"><i><img src="/static/images/icons/test1.svg" alt="test1" /></i><span>test1 </span></div>, type: MenuItem.Types.LINK, payload: '#/test1' },
  { route: 'test2', text: <div className="sideMainNav"><i><img src="/static/images/icons/test2.svg" alt="test2" /></i><span>test2</span></div>, type: MenuItem.Types.LINK, payload: '#/test2' },
  { route: 'test3', text: <div className="sideMainNav"><i><img src="/static/images/icons/test3.svg" alt="test3" /></i><span>test3</span></div>, type: MenuItem.Types.LINK, payload: '#/test3' },
  { route: 'test4', text: <div style={{margin:'0px -8px',fontWeight:'bold',color:'#58595B',fontSize:'14px'}}>test4</div>, type: MenuItem.Types.LINK, payload: '#/test4' },
  { route: 'test5', text: <div style={{margin:'0px -8px',fontWeight:'bold',color:'#58595B',fontSize:'14px'}}>test5</div>, type: MenuItem.Types.LINK, payload: '#/test5' },
  { route: 'test6', text: <div style={{margin:'0px -8px',fontWeight:'bold',color:'#58595B',fontSize:'14px'}}>test6</div>, type: MenuItem.Types.LINK, payload: '#/' },
  { route: 'test7', text: <div className="sideLogout" onClick={this.logout}>test7</div> },
  { route: 'test8', text: <div className="sidenavPlink"> <a target="_blank" rel="nofollow noreferrer" href="#/">test8</a></div> },
  { route: 'test9', text: <div className="sidenavHelplink"> <a target="_blank" rel="nofollow noreferrer" href="#/"><span>Help</span><i><img src="/static/images/icons/test9.svg" width="16px"/></i></a></div> }
];
Ad

Answer

From the Material-UI code-base, the text prop can only be a string...

text: React.PropTypes.string.isRequired,

You should use MenuItem which takes primaryText prop which can have nodes.

Ad
source: stackoverflow.com
Ad