Unable to display icon in React Bootstrap Tab instead of text

Question

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.

Answer 1

<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>

Answer 2

did you tried this? hope this can help you

import { FaTrash } from "react-icons/lib/fa/";


<Tab
  eventKey={1}
  title={
   <span>
     <FaTrash />{" "}
   </span>
  }
>
    Tab 1 content
</Tab>

working example