ReactJS Create a SVG element from String

0
votes

I need to create a SVG from a string in order to make this new SVG to be nested within another SVG object. I've followed this documentation.

I added this code:

const data =
      '<svg height="210" width="400"><path d="M150 0 L75 200 L225 200 Z" /></svg>';

    const parser = new DOMParser();
    const dataParsed = parser.parseFromString(data, "image/svg+xml");
    const parsed = dataParsed.firstChild;

    console.log(parsed);

What I need is to reproduce this sandbox, but the nested SVG is a string. That is to say this other sandbox.

The first approach works as expected, the second one doesn't work at all because it yells at me Objects are not valid as a React child. I'm kind of stucked here. Any hint on how to solve this?

reactjssvg