TabContent in react-bootstrap & componentClass props

Question

I am trying to pass in a react component into the TabContents componentClass prop. This react component also needs to have props added to it. I am just wondering how this is possible.

I have tried something along the lines of

import MyClass from './somewhere';
import { TabContent } from 'react-bootstrap';
const x = <MyClass thing={y} />
..
..
<TabContent componentClass={x} /> 

but it does not work it seems that the TabContent class' componentClass propType requires elements or strings. I want to know what is the best way that I can pass in a react component that requires props that isnt a pure component to a tab pane...

Just for extra information. This component that I want to pass in fetches data from an API on mount or something along those lines.

Answer 1

MyClass will inherit all props from TabContainer. So you can pass in the component as is and set the props you want to have there on the TabContainer.

import MyClass from './somewhere';
import { TabContent } from 'react-bootstrap';
..
..
<TabContent componentClass={MyClass} thing={y} /> 
// MyClass will have `this.props.thing`.