title: Add custom props to a custom component
body: <p>I've built my own custom react-bootstrap Popover component:</p>
  
  <pre><code>export default class MyPopover extends Component {
    // ...
    render() {
      return (
          &lt;Popover {...this.props} &gt;
             // ....
          &lt;/Popover&gt;
      );
    }
  }
  </code></pre>
  
  <p>The component is rendered like so: </p>
  
  <pre><code>// ... my different class ...
  
    render() {
  
      const popoverExample = (
          &lt;MyPopover id="my-first-popover" title="My Title"&gt;
            my text 
          &lt;/MyPopover &gt;
      );
  
      return (
          &lt;OverlayTrigger trigger="click" placement="top" overlay={popoverExample}&gt;
            &lt;Button&gt;Click Me&lt;/Button&gt;
          &lt;/OverlayTrigger&gt;
      );
    }
  </code></pre>
  
  <p>Now, I want to add custom props to <code>MyPopover</code> component like that: 
       
             my text 
       
  And to use the new props to set some things in the popover
  for example -  </p>
  
  <pre><code>    &lt;Popover {...this.props} className={this.getClassName()}&gt;
         {this.showTheRightText(this.props)}
      &lt;/Popover&gt;
  </code></pre>
  
  <p>but then I get this warning in the browser: </p>
  
  <blockquote>
    <p>Warning: Unknown props <code>popoverType</code> on  tag. Remove these props from the element.</p>
  </blockquote>
  
  <p>Now, I guess that I can just remove the <code>{...this.props}</code> part and insert all the original props one by one without the custom props, but In this way I lose the "fade" effect and also it's an ugly way to handle this problem. Is there an easier way to do it?</p>