I'm adding some reagent to an application in which some hiccup rendering is already done on the server from a database. Obviously react then hooks into the html that it sees & mounts.
I want to do some progressive enhancement, i.e., a react/reagent component should mount but I also need the original text of the div it's going to mount on, this is put there by the database. So to react it's in the static html it is about to overwrite when it mounts. I want to save that element's contents before it's "deleted".
Here's what's not working
(defn by-id [id] (js/document.getElementById id))
(when-let [el (by-id "lesson-app")] ; only mount when this el is present
(let [lesson-text (by-id "lesson-app")] ; try to get el contents before mount
(console.log lesson-text) ; <- this logs contents *after* mount!!
(rdom/render [lesson-app] el))) ; mount the component
What's logged to console here is the dom element after mount. Why is that?
Was wondering if I could use a form-2 component and grab the contents in the let. That's not working for me though, interesting to know why if anyone can explain.
Update
I've succeeded in passing in text as an html attribute, as described here. But that means for progressive enhancement I need to render the text twice, once as an attr & once as the normal text content.
Update 2
I'm getting the feeling it may be for reasons of convention or encouraged idiom and/or perhaps speed that react does not let you pass in html element content (it clearly doesn't violate the laws of physics to do so). The slight cost if this is correct is that for a progressive app we must duplicate the text as both html element content and a data- attribute, but that's not terrible at least for my current case.
