Search code examples
reactjsiconsreact-bootstrap

Unable to display icon in React Bootstrap Tab instead of text

I am using React Bootstrap's Tabs and I am stuck with an issue where I am unable to pass icon into the title prop because its is displayed as [Object][Object], any thoughts on this ?

const tabsInstance = (
  <Tabs defaultActiveKey={1}>
    <Tab eventKey={1} title={`Tab1 ${<i class=" icon-remove"></i>}`}>Tab 1 content</Tab>
    <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>
    <Tab eventKey={3} title="Tab 3" disabled>Tab 3 content</Tab>
  </Tabs>
);

Output is displayed as:

Tab1 [Object][Object] Tab 2 Tab 3

How to display icon in the tab instead of Title?

======UPDATE===== Output displayed after suggestion. enter image description here

Solution 
  • <Tab eventKey={1} title={`Tab1 ${<i class=" icon-remove"></i>}`}>Tab 1 content</Tab>

    The problem is that template literal will try to evaluate React Object (transpiled by babel JSX syntax) to a string, that's why you get: Tab1 [Object][Object]. So in the end, you are passing a String as a title prop.

    To solve it pass a React object this way:

    <Tab eventKey={1} title={<span>Tab1 <i className=" icon-remove" /> </span>}>Tab 1 content</Tab>