rum 2023-04-10 | Slack Archive

alex05:04:58

If I have (rum/defc A ...), how might I access props that are passed via an external React component calling React.cloneElement on elementA (instantiated from A? In such a scenario. cloneElement copies the initial props e.g. :rum/args, then invokes A's underlying React component class with additional React props. These props are not merged into :rum/args because React doesn't know anything about Rum, just the React component -- instead the props are provided as part of the standard React props map i.e. {":rum/args" argvec, "random" 123, ...other-props} In React DevTools, I see the following (screenshot). Is there a way to access the random prop inside my Rum component?

alex06:04:37

Might need to use React context or other global state as a workaround

kamilwaheed11:04:57

A crude way of doing this would be to create a new :rum/args that contains the additional React props and pass that to cloneElement

(let [el (A {,,,props})
      args (-> el
               (gobj/get "props")
               (gobj/get ":rum/args")
               first)]
  (React/cloneElement
   el
   #js {":rum/args" (list (assoc args :random 123))}))

Note: I’m not exactly sure why :rum/args is a list (with first el containing the component props in a map). first above only takes the first element and reconstructs the list losing other elements. It might make sense to do this in a lossless manner

alex11:04:54

Thanks Kamil - makes total sense! Forgot :rum/args is just data after all I believe :rum/args is a list because Rum components support an argvec and can take a variadic number of arguments. Contrast this to your typical React component which only expects a props map

kamilwaheed11:04:08

Ah yes, that makes sense. In that case, we’d want to modify the above code snippet to keep the rest of the elements around

🙌 2

2023-04-10

Channels