How to render HTML value e.g "<div><div>Go to Google</div><div>Search on spfx react project</div></div>", in SPFX project using type script?

Question

We have created spfx react project for SharePoint online using type script:

Here, props.appendTextDetails value is "Go to GoogleSearch on spfx react project".

const FCRichtext = (props:any) => {

return <div>
  <Label>{props.appendTextDetails}</Label>
</div>

}; export default FCRichtext;

How can we render the HTML value?

Answer 1

You can use dangerouslySetInnerHTML attribute to add the HTML.

Modify your code as below:

return <div>
  <Label><div dangerouslySetInnerHTML={props.appendTextDetails} /></Label>
</div>

React DOM elements

Answer 2

You can use React render html package. https://www.npmjs.com/package/react-render-html

import renderHTML from 'react-render-html';

render() {
return (
  <div className='sample'>
    {renderHTML(someHTML)}
  </div>
);

}