1

I have an svg in a String variable. I get this string from an API call, so this information is dynamically present. I want to render this string via React.createElement dynamically on browser. How do I do this?

One way is to parse svg string into elements, then call React.createElement(...) for each element inside svg recursively, but writing an SVG parser doesn't seem to be optimal. Is there a cleaner way?

Thanks

zookastos
  • 917
  • 10
  • 37

1 Answers1

0

You can try this: <div dangerouslySetInnerHTML={{__html:'<svg ....></svg>'}}/>

Shen
  • 257
  • 1
  • 7
  • How do I do this in react? – zookastos May 11 '21 at 04:12
  • just copy the code into your component, replace the string with your svg string. @zookastos – Shen May 11 '21 at 04:15
  • The thing is, I am looking to render this svg element dynamically. So need to do it via React.createElement() method. Is it possible to do it via this way as well? Thanks. – zookastos May 11 '21 at 04:17
  • I think, maybe this will solve the problem - https://stackoverflow.com/questions/44900569/turning-an-svg-string-into-an-image-in-a-react-component – zookastos May 11 '21 at 04:18
  • you can replace the string with any of your state or variable. – Shen May 11 '21 at 04:20