Traverse jsx in variable, then render it by appending to ref

I have a variable containing jsx such as this:

const data = (
            Lorem ipsum
            dolor sit amet,
            consectetur adipiscing elit

I want to traverse the above data one element at a time, then render the elements as follows:

data.props.children.forEach(element => {


TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.


You could try to use renderToString before appending the element to turn it into HTML:

But before that, you will need to turn HTML String into an actual HTML object:

import { renderToString } from 'react-dom/server';

data.props.children.forEach(element => {
    const htmlObject = document.createElement("div");
    htmlObject.innerHTML = renderToString(element);


Live working test:

Edit elastic-germain-kuvfr