Interpret HTML String from re-frame clojurescript app

Question

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

Eugene Pakhomov · Accepted Answer · 2023-03-25 09:42:56Z

1

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}}])

answered Mar 25, 2023 at 9:42

Eugene Pakhomov

11.2k3 gold badges32 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gwenael Over a year ago

it works indeed that way. Thanks a lot. Just a last question, how did you figured out the writing - any docs? Thanks again.

Eugene Pakhomov Over a year ago

Of course, plenty. Everything is documented. react.dev/reference/react-dom/components/…

Collectives™ on Stack Overflow

Interpret HTML String from re-frame clojurescript app

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related