Saving HTML markup from Rich Text Editor into MongoDB using React.js

Question

I have been trying to create my own blog app, where a user can create a post and I managed to insert a Quill Rich Text Editor.

It successfully updates a piece of state, but the data I'm receiving is a HTML markup (example below). So my question is: How do I save that into my database with a POST request.

NOTE: I'm not asking how to make the back-end logic of it or how to make the AJAX call, I'm simply asking how to pass this markup as an argument to the POST request. Do I need some sort of a converter, so I can convert the HTML markup to a JSON object or something else?

 <h1>This is the header.</h1><p>This is a sample text </p><p>so you guys can have an idea of what </p><p>the editor produces and what I'm kind of </p><p>struggling to store in the MongoDB database.</p><p><em>and this is some italic text.</em></p>

Answer 1

There is an option from react you should explore while you have already fetched the data

dangerouslySetInnerHTML

your function should be:

function createMarkup(theExactHtmlWithTag) {
    return { __html: theExactHtmlWithTag };
}

while the usage:

 <div dangerouslySetInnerHTML={createMarkup(`<h4> Hello <strong> World </strong></h4>` )} />

Remember to sanitize your HTML before DB storage.