Question:
Can I do SVGSVGElementin reagent without use dangerouslySetInnerHtml?
Context:
I use the vis.js chart library , the method getLegendreturns SVGSVGElementobject ie
const icon = chart.getLegend(args);
In the console, I see this:
in: icon instanceof SVGSVGElement
out: true
in: icon
out: <svg><rect x="0" y="0" width="30" height="30" class="vis-outline"></rect><path class="vis-graph-group0" d="M0,15 L30,15"></path></svg>
Problem:
When I try to do this in a reaction using:
render (
<div> { icon } </div>
)
I get the following error:
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 or wrap the object using createFragment(object) from the React add-ons. Check the render method of `LegendElement`
Workaround:
I am currently using:
<svg dangerouslySetInnerHTML={{__html: icon.innerHTML}} />
But I was hoping for a simple solution that does not use a method with a word dangerous to the name.
Study:
I read this similar question, but I don’t think it helps the SVG created at runtime: How do I use SVG in a reagent without using dangerouslySetInnerHTML?