0

I haven't been able to find any solutions for this online. I've tried several things, so I hope someone here can help me figure it out.

I receive a string from my API that corresponds to an entire SVG encapsulated element. I want to be able to render this SVG. Using DOMParser()'s parseFromString method, I am able to retrieve an SVGSVGElement but I am not able to render this to my DOM.

Here is the relevant code: (I have put the API response string into a const for simplicity)

render() {
    const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 250 300" preserveAspectRatio="xMidYMid meet" onload=""><rect x="5" y="20" class="room floor1" id="1.122" width="25" height="55"/><rect x="30" y="50" class="room floor1" id="1.120" width="19" height="25"/><rect x="49" y="50" class="room floor1" id="1.118" width="19" height="25" /><rect x="68" y="50" class="room floor1" id="1.116" width="22" height="25" /></svg>';
    svgManipulated = new DOMParser().parseFromString(svgManipulated, "image/svg+xml");

    return (
        <div>
            {svg}
            {svgManipulated}
        </div>
    )
}

Error received:

Error: Objects are not valid as a React child (found: [object SVGSVGElement]). If you meant to render a collection of children, use an array instead.
Ali Öztürk
  • 113
  • 2
  • 9
  • 2
    You'd need to use [`dangerouslySetInnerHTML`](https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml) to inject a string as markup. – Patrick Roberts Dec 15 '20 at 10:05
  • Still, you have styles like `class="room floor1"` which will only work if you have them on client. – Dennis Vash Dec 15 '20 at 10:08

0 Answers0