reactjs - How to pass a component to another component in React? -

i want write tab component below,it's ok when click tab1 show content of test,but when define class component test2, seems wrong.and erro 'uncaught typeerror: cannot call class function'.thanks much.

// use of component const tabs = [     {tabname: 'tab1', content: () => <tab.pane component={test} /> },     {tabname: 'tab2', content: () => <tab.pane component={test2} /> } ];  const test = () => {     return (<hgroup>tetetetetetet</hgroup>) }; class test2 extends component {     render() {         return(<hgroup>123213</hgroup>)     } }  @observer export default class editlabels extends component {     render() {       return (<tab panes={tabs} />)     } }   // component  @observer class tab extends component {  @observable activeindex = 0;  static pane = ({children, component}) => {      console.log(typeof component);     return (         <vgroup>             {children && <hgroup>{children}</hgroup>}             {component && component.call(this)}         </vgroup>      ) };  render() {     const { panes } = this.props;     return (         <vgroup>             <hgroup>{ panes.map((item, index) => {                 return (<hgroup key={index}                                 onclick={() => this.activeindex = index}                                 style={this.activeindex === index && {color: 'red'}}>{item.tabname}</hgroup>)             })}             </hgroup>              {panes[this.activeindex].content()}          </vgroup>     ) } }