Estoy haciendo un sitio web de blogs React. Cuando un usuario crea un nuevo blog, las etiquetas html que agrega al cuerpo del blog se guardan en una base de datos MySQL.

Estoy tratando de obtener el cuerpo del blog de la base de datos y agregar todas las etiquetas html junto con sus atributos y contenido dentro de una matriz.

Este es el código de la página de información del blog.

 <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>

Sin embargo, el problema con esto es que muestra el cuerpo del blog, junto con las etiquetas html y todo como una cadena.

Imagen de ejemplo: Ejemplo1

También probé esto:

 <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>

Pero esto me da el siguiente error:

Error: los objetos no son válidos como hijos de React (encontrado: [objeto HTMLBodyElement]). Si tenía la intención de representar una colección de niños, use una matriz en su lugar

¿Alguna idea de lo que podría probar?