I am making a blogs React Website. When a user creates a new blog the html tags they add to the blogs body are saved to a MySQL database.

I'm trying to get the blog's body from the database and add all the html tags along with their attributes and content inside an array.

This is the code for the blog's information page.

        <article>
          <h2>{blog[0].title}</h2>
          <p className="written-by">Written by {blog[0].author}</p>
          <div>
            <pre className="pre">{blog[0].body}</pre>
          </div>
          {Cookies.get("webToken") && (
            <button onClick={handleDelete}>Delete</button>
          )}
        </article>

The problem with this though is that it displays the blog's body, along with the html tags and everything as a string

Example image: Example1

I also tried this:

        <article>
          <h2>{blog[0].title}</h2>
          <p className="written-by">Written by {blog[0].author}</p>
          <div>
            <pre className="pre">
              {parser
                .parseFromString(blog[0].body, "text/html")
                .querySelector("body")}
            </pre>
          </div>
          {Cookies.get("webToken") && (
            <button onClick={handleDelete}>Delete</button>
          )}
        </article>

But this gives me the following error:

Error: Objects are not valid as a React child (found: [object HTMLBodyElement]). If you meant to render a collection of children, use an array instead

Any idea what I could try?