title: How to store react component in state and pass a callback function
body: <p>I have a problem where I'm trying to store a component  into my state and also pass a callback function as its props so that it can be called inside CustomComponent.
  Here's what I did:</p>
  
  <pre><code>state = {
      tabs: [
          { tabID: '1', component: &lt;CustomComponent testCallback={this.callbackHandler} /&gt;}
      ]
  }
  
  
  callbackHandler = () =&gt; {
      ....
  }
  </code></pre>
  
  <p>But when I try to call the function inside CustomComponent ( this.props.testCallBack() ), it tells me this is not a function.</p>
  
  <p>Is it OK to store a component inside state like this?
  Basically, I want to build my own tab group component where I can display different components in different tabs. The callback function is used to let the parent component know when it should add a new tab.</p>
  
  <p>I know there are some libraries for tabs, but I'm just curious how I can do it here.</p>
  
  <p>Thanks</p>