Add custom props to a custom component
<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>