How to insert html string?

[dmitrysurkin]

Hello! My component has a "text" prop. It is an html string. I just want to add it to the react. React documentation specifies the attribute dangerouslySetInnerHTML. But it doesn't work with atomico. If use tagged function, don't know how to pass a variable

What can be done? I'll leave here the code that would work in the react

const Component = ({text}) => <div dangerouslySetInnerHTML={{__html: text}}/>

With atomico i have this result <div class="" dangerouslysetinnerhtml="{"__html":"<div>222</div>"}"></div>

[UpperCod]

Hi @dmitrysurkin, Atomico in most cases reflects directly to the API DOM, you can use the innerHTML property to inject the html to the node, example:

<div innerHTML={`<h1>injected html</h1>`}></div>

Thanks for using Atomico!

[UpperCod]

I just added what was commented in the documentation in the Atomico documentation

https://atomico.gitbook.io/doc/guides/from-react-to-atomico/virtualdom-api-differences

[lokimckay]

@dmitrysurkin If you're trying to use HTML pulled from the regular DOM that might not be strictly JSX compliant, you may want check out my issue for a workaround