I'm trying to pass a <div></div> (some html/jsx content) into a FC but not from the children props (it's already used for something else).
I wanna have something like that:
<Component props={{
title: "hello",
description:
{
<>Hello <h1>world</h1> </>
}
/>
How can I do that ?
Update :
You can use Fragment if your version is above 16.2 :
like this :
<Child
text={
<Fragment>
This is an <strong>HTML</strong> string.
</Fragment>
}
/>
Older version :
You can use dangerouslySetInnerHTML to render a HTML content from a prop.
pass the html as a normal string prop
<Component text="This is <strong>not</strong> working." />
And render in in the JSX code like this:
enter code here :
<div className="header-title-right wow fadeInRight" dangerouslySetInnerHTML={{__html: props.text}} />
Just be careful if you are rendering data entered by the user. You can be victim of a XSS attack
Here's the documentation: https://facebook.github.io/react/tips/dangerously-set-inner-html.html
Example : Working Demo