pass div to props react without children-CodePudding

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 ?

CodePudding user response：

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