reagent 2021-10-12 | Slack Archive

Asko Nōmm19:10:54

Hi! I have a question regarding children passed to a Reagent component from a React component. Namely, my Reagent component get’s back props that look like this:

#js {:children #js {"$$typeof" #object[Symbol(react.element)], :type #object[Function], :key nil, :ref nil....etc

How would I go about rendering these children inside of:

(reagent/as-element
      [portal
       {:container (js/document.querySelector "body")}
       "render-children-here"])

It renders the string render-children-here just fine, but as soon as I replace that with (:children (js->clj props :keywordize-keys true)) it will render the result seemingly as a string like this:

{:$$typeof #object[Symbol(react.element)], :type #object[Function], :key nil, :ref nil, :props {:modifiers [], :placement "bottom-start", :children #object[Function]}, :_owner #object[FiberNode [object Object]], :_store {}}

As opposed to actually rendering the children.

lilactown19:10:40

js->clj is recursive so it is probably destroying the child element in the children property

lilactown19:10:13

you can get the children property out using goog.object

lilactown19:10:58

(goog.object/get props “children”)

Asko Nōmm19:10:15

Yup that was it! Thank you 🙂

2021-10-12

Channels