CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Love Trivedi
Love Trivedi

Reputation: 4046

Getting a warning in Console when using Material UI menu. Suggest me solution. I am using HTML in text object

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 href="#/">test8</a></div> },
  { route: 'test9', text: <div className="sidenavHelplink"> <a href="#/"><span>Help</span><i><img src="/static/images/icons/test9.svg" width="16px"/></i></a></div> }
];

Upvotes: 0

Views: 926

Answers (1)

hazardous
hazardous

Reputation: 10837

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.

Upvotes: 1

Related Questions