react return markup from dangerouslySetInnerHTML

Question

I have html saved from wysiwyg editor and fetched from database, I need to display the content which I usually do with

 <div dangerouslySetInnerHTML={{__html: content}} />

but now I need to use the formatted content inside another component,

so I am hoping if there is a function to return the markup like this var formattedContent = getMarkup(content)//expecting this to do what dangerouslySetInnerHTML does

<Highlight search="Condominium" >
    {formattedContent}
</Highlight>

because this isn't working

<Highlight search="Condominium" >
      <div dangerouslySetInnerHTML={{__html: content}} />
</Highlight>

Any help is appreciated as I am nearly struggling for with this more than a day.

What I am trying above is

npmjs.com/package/react-highlighter -- it highlight matched words, but I need to highlight not just plain text but html

Answer 1

The dangerouslySetInnerHTML value is an object with __html as key and your HTML content as value.

<Highlight search="Condominium" >
    <div dangerouslySetInnerHTML={{__html: content}} />
</Highlight>

Update:

The Highlight component has already an Attribute innerHTML . You don't need to use dangerouslySetInnerHTML in your case.

From official Documentation :

<Highlight innerHTML={true}>{content}</Highlight>