title: How can I pass a DOM element to an HTML attribute? ReactJs/ Javascript
body: <p>I have to pass react element to html attribute:</p>
  
  <pre><code>let element = (
  &lt;div&gt;
     &lt;div&gt; test&lt;/div&gt;
      &lt;div&gt; &lt;span&gt; test333&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  )
  &lt;div data-react = {element}&gt;&lt;/div&gt;
  </code></pre>
  
  <p>However I get <code>"object Object"</code> inside the data-react attribute, is there a way I could use a method to pass dom element and use that inside my render function?</p>
  
  <p>This is the expected o/p I'm trying to get to render it as a react element:
  <a href="https://i.stack.imgur.com/t5br4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t5br4.png" alt="enter image description here"></a></p>
  
  <p>UPDATE:::::::::
  So here is what I have tried:</p>
  
  <p>I want to show a tooltip that has HTML content, however data-tip accepts only "string" and not html. Hence now im using react component  to show the tooltip content. 
  </p>
  
  <p>Now I want to pass the tooltip content to my react component that I'll use to show the tooltip, but for that I need to find a way to pass the content defined:</p>
  
  <pre><code>let element = (
      &lt;div&gt;
         &lt;div&gt; test&lt;/div&gt;
          &lt;div&gt; &lt;span&gt; test333&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      )
      &lt;div data-react = {element}&gt;&lt;/div&gt;
  </code></pre>
  
  <p>hence I used: <code>&lt;div data-tip = {ReactDOMServer.renderToString(elements)}&gt;&lt;/div&gt;</code></p>
  
  <p>with this in my tooltip component
   <code>&lt;Tooltip&gt;
       const tipvalue = e.target.getAttribute("data-tip")</code> ;</p>
  
  <p>I get <code>data-tip</code> value as a string, now I want to pass this to my react component to render the html.</p>
  
  <pre><code>&lt;Tooltip&gt;
  &lt;ReactTooltip content = {tipvalue}/&gt;
  &lt;/Tooltip&gt;
  
  
  export default class ReactToolTip extends PureComponent {
  
    render() {
      const doc = new DOMParser().parseFromString(this.props.content, "application/xml");
      const htmlSections = doc;
        return (
          {htmlSections}
        );
    }
  }
  </code></pre>
  
  <p>however this gives me:
  <a href="https://i.stack.imgur.com/xKX46.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xKX46.png" alt="enter image description here"></a></p>
  
  <p>not sure how to render it in the component after this? 
  any ideass???</p>