[HELP WANTED] Rendering HTML in React Froala WYSIWYG

[kirasiris]

I'm trying to use the React version of the Froala Editor in my application. Since this will be used in several CRUD operations, I decided to create a component to be used in all my create and update pages.

Everything works great when creating an article, however when I try to fetch a text field from MongoDB in the update pages, the HTML does not gets to render.

As briefly stated above, the string coming from the DB contains html tags:

<h1>Yada-yada-yada</h1>
<p>I'm coming from the MongoDB object</p>

This is my code for the update page:

const [post, setPost] = useState({})
const [postData, setPostData] = useState({
  title: '',
  text: ''
});
const [loading, setLoading] = useState(false);

const {title, text} = postData;

useEffect(() => {
  const fetchPost = (id) => {
    const res = await axios.get(`URL/${id}`);
    setPost(res.data);
    setPostData({
      title: res.data.title,
      text: res.data.text
    });
    setLoading(false);
  }
  fetchPost(router.id)
}, [router.id])

return loading || post === null || post === undefined ? (
  <p>Loading</p>
) : (
  <div>
  	<input type="text" value={title} />
	<MyTextArea
      id="text"
      name="text"
      value={text}
      objectData={postData}
      setObjectData={setPostData}
  	/>
  </div>);

The <MyTextArea /> is the component that I created where the Froala Editor is initialized:

"use client";
import FroalaEditorComponent from "react-froala-wysiwyg";

const MyTextArea = ({
	id = "",
	name = "",
	value = "",
	objectData,
	setObjectData = () => {},
}) => {


	return (
		<div id={id} name={name} className="froala-editor-wrapper">
			<FroalaEditorComponent
				tag="textarea"
				model={value}
				onModelChange={(e) => {
					setObjectData({
						...objectData,
						text: e,
					});
				}}
				config={{
					placeholderText:"Share something new. Now with #hashtags support, YAY!!!",
				}}
			/>
		</div>
	);
};

export default MyTextArea;