Cannot render React Component on Clone Drop

[michaelmcshinsky]

When clone is set to true from container1 to container2, the drop function will not return a referenced React Component but rather the source el as either an object or html wrapping the object. Is there any way to reference the replacement of el correctly to render the React Component in place of el on drop?

Use Case: container1 holds a preview image and when dropped into container2, the image reference creates the React Component on drop.

drake.on('drop', function(el, target, source, sibling) {
   if (source === container1) {
     var type = el.getAttributeNode('data-type').value;
     var ReactComponent = window[type + 'Component'];
     // variation A
     el = <ReactComponent/> //result -> [object][object]
     // variation B
     el.innerHTML = <ReactComponent/> //result -> <div>[object][object]</div>
     // variation C
     el.parentNode.replaceChild(<ReactComponent/>, el);
     //result -> Failed to execute 'replaceChild' on 'Node': parameter 1 is not of type 'Node'
     //Using React.createElement fails as well
});

I can't seem to get around any of these errors to create the element as an actual node to the DOM.

[michaelmcshinsky]

Found this source for anyone running into this issue:

    var temp = document.createElement("div");
    ReactDOM.render(<ReactComponent/>, temp);
    el.parentNode.replaceChild(temp.firstElementChild, el);

http://stackoverflow.com/questions/30686796/react-render-replace-container-instead-of-inserting-into
https://discuss.reactjs.org/t/trying-to-do-a-reactdom-render-a-el-replacing-the-el-not-appending-to-it/2681