React Bootstrap OverlayTrigger and Tooltip error
<p>I am trying to use react-bootstrap OverlayTrigger and Tooltip inside of a formatter for react-bootstrap-table and keep getting the following error:</p>
<blockquote>
<p>OverlayTrigger's only required prop is overlay which is supposed to be a node and Tooltip's only required prop is id (despite none of their examples showing that you need an ID) which needs to be a string.</p>
<p>&quot;onlyChild must be passed a children with exactly one child.&quot;</p>
</blockquote>
<p>The relevant code looks like:</p>
<pre><code>import {Button, DropdownButton, MenuItem, Modal,
    OverlayTrigger, Tooltip} from 'react-bootstrap';

....

const submitterFormatter = (submitter, row) =&gt; {
  return (
    &lt;OverlayTrigger placement=&quot;bottom&quot; overlay={toolTipComponent(submitter, row)}&gt;
      {submitter}
    &lt;/OverlayTrigger&gt;
  );
};

const toolTipComponent = (toolTipText, row) =&gt; {
  return (
    &lt;Tooltip id={String(row.id)}&gt;
      {toolTipText}
    &lt;/Tooltip&gt;
  );
};
</code></pre>
<p>I have also tried the following for submitterFormatter</p>
<pre><code>const submitterFormatter = (submitter, row) =&gt; {
  return (
    const toolTipInstance = toolTipComponent(submitter, row);
    &lt;OverlayTrigger placement=&quot;bottom&quot; overlay={toolTipInstance}&gt;
      {submitter}
    &lt;/OverlayTrigger&gt;
  );
};
</code></pre>