domclojurescriptreagent

Interpret HTML String from re-frame clojurescript app

I want to connect an re-frame clojurescript app to a headless content manager to get posts. The content is returned to me as a string with HTML tag - something like below:

<h1>dsfdsfdsf</h1><p>ddsfdsf</p>

I went straight to display the string and ended with the full string with tags displayed... I read around that I need to access the DOM to with an interpreter.

I tried the below function

(defn parse-html [html]
  "Parse an html string into a document"
  (let [doc (.createHTMLDocument js/document.implementation "mydoc")]
    (set! (.-innerHTML doc.documentElement) html)
    doc
    ))

(parse-html "<div><p>some of my stuff</p></div>")

but ended with the error

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

Can someone advise me a way to render the html from the string.

Thanks in advance for your help.

Regards

Solution

  • I've replaced the re-frame tag with a more appropriate reagent - the library that re-frame itself uses for rendering.

    In React, you do that via the dangerouslySetInnerHTML attribute that receives unparsed HTML.

    In Reagent, and consequently re-frame, in order to use that attribute you have to write something like:

    (defn wrap-html [html]
  [:div {:dangerouslySetInnerHTML {:__html html}}])