title: Converting HTMLElement to a React Element, and keeping any event listeners
body: <p>Rendering some JSON data into a set of collapsible HTML elements is EASY using a library like <strong>renderjson</strong> (npm package) for Vanilla JS</p>
  
  <pre><code>const data = { sample: [1, 2, 3, 4], data: { a: 1, b: 2, c: ["hello", null] } };
  const rjson = renderjson(data);
  document.getElementById('to-render').append(rjson);
  </code></pre>
  
  <hr>
  
  <h2>In The react world</h2>
  
  <p>However, <strong>renderjson</strong> returns an HTMLElement, NOT A STRING. Please note that I'm not JUST trying to convert HTML strings into react HTML here. I'm trying to convert the HTMLElement into a real ReactElement.</p>
  
  <p>So, I actually managed to do this, but since I'm parsing the HTMLElement into a string, all the onClick event listeners generated by <strong>renderjson</strong> on the + and - handles (to open or collapse the json) are LOST in the process....</p>
  
  <p>Does anyone have any idea on how to convert a HTMLElement object into React Element, keeping all the original event handlers?</p>
  
  <hr>
  
  <p>I guess, the real question here is: how can the <strong>renderjson</strong> package be "repackaged" to become React friendly?</p>
  
  <p><a href="https://codesandbox.io/s/xoz7q9jv3o" rel="noreferrer">Here is a codesandbox to make it easier to see what I'm talking about here.</a></p>