HTML tags not rendering in proper way in React js using TinyMCE text editor

I am using TinyMCE text editor in React js. As Purpose of using rich-text editor is to save the data along-with the html tags.

The issue i am facing is the data that i saved in firebase with 'p' tag it is not rendering/behaving in proper way in the page.

Can anyone please let me know what wrong i am doing?

here is the screenshot:

Using TinyMCE rich-text editor:

import { Editor } from '@tinymce/tinymce-react';


     <Editor 
      id='tinyMce' 
      
       init={{
        height: 200,
        menubar: false,
        toolbar_sticky: true,

        plugins: [
          'a11ychecker','advlist','advcode','advtable','autolink','checklist','export', 
          'lists','link','image','charmap','preview','anchor','searchreplace','visualblocks',
          'powerpaste','fullscreen','formatpainter','insertdatetime','media','table','help','wordcount'
       ],
       toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' +
       'alignleft aligncenter alignright alignjustify | ' +
       'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help'
      }}

      value={title}
      onEditorChange={setTitle}

       />

retrieving data:

{values.Title}

thanks

The html string you are saving in your collection is fine. When you are fetching it back in the table it is a string, not a dom element.

Consider the case when its rendered as a string:

export default function App() {
  const content = "<p>Hi</p>";
  return <div className="App">{content}</div>; //Output is <p>Hi</p>
}

Now binding the content directly to dom:

export default function App() {
  const content = "<p>Hi</p>";
  return <div dangerouslySetInnerHTML={{ __html: content }} />; //Output is Hi
}

However dangerouslySetInnerHTML opens your webpage to xss attacks. so use it wisely and sanitize your data before passing it.