<div> cannot appear as a descendant of <p> : <p>I'm seeing this. It's not a mystery what it is complaining about:</p>

<pre><code>Warning: validateDOMnesting(...): &lt;div&gt; cannot appear as a descendant of &lt;p&gt;. See ... SomeComponent &gt; p &gt; ... &gt; SomeOtherComponent &gt; ReactTooltip &gt; div.
</code></pre>

<p>I'm the author of <code>SomeComponent</code> and <code>SomeOtherComponent</code>. But the latter is using an external dependency (<code>ReactTooltip</code> from <a href="https://github.com/wwayne/react-tooltip" rel="noreferrer"><code>react-tooltip</code></a>). It's probably not essential that this is an external dependency, but it lets me try the argument here that it is "some code that's out of my control".</p>

<p>How worried should I be about this warning, given that the nested component is working just fine (seemingly)? And how would I go about changing this anyway (provided I don't want to re-implement an external dependency)? Is there maybe a better design that I'm yet unaware of?</p>

<p>For completeness sake, here's the implementation of <code>SomeOtherComponent</code>. It just renders <code>this.props.value</code>, and when hovered: a tooltip that says "Some tooltip message":</p>

<pre><code>class SomeOtherComponent extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const {value, ...rest} = this.props;
    return &lt;span className="some-other-component"&gt;
      &lt;a href="#" data-tip="Some tooltip message" {...rest}&gt;{value}&lt;/a&gt;
      &lt;ReactTooltip /&gt;
    &lt;/span&gt;
  }
}
</code></pre>

<p>Thank you.</p>
