reagent 2023-10-23 | Slack Archive

I'm not understanding how to use forwardRef correctly. I have a modal that is wrapped in a forward ref like so:

(def modal
  (forwardRef
    (fn [props ref]
      [modal-panel]...)))  ;; <- from

but I get an invalid hiccup tag as a result:

Uncaught Error: Assert failed: Invalid Hiccup form: [#js {"$$typeof" #object[Symbol(react.forward_ref)], :render #object[Function]} {:showing? #object[reagent.ratom.RAtom {:val true}]} nil]
 (in re_com.box.v_box)
(valid-tag? tag)
    at Object.reagent$impl$template$vec_to_elem [as vec_to_elem] (template.cljs:280:5)
    at Object.reagent$impl$template$as_element [as as_element] (template.cljs:297:22)
    at Object.reagent$impl$protocols$Compiler$as_element$arity$2 (template.cljs:318:10)
    at Object.reagent$impl$protocols$as_element [as as_element] (protocols.cljs:6:16)
    at template.cljs:139:37
    at core.cljs:5704:36
    at core.cljs:5704:35
    at Object.cljs$core$IKVReduce$_kv_reduce$arity$3 (core.cljs:5708:24)
    at Object.cljs$core$_kv_reduce [as _kv_reduce] (core.cljs:715:16)
    at Object.cljs$core$reduce_kv [as reduce_kv] (core.cljs:2596:8)

Do I need to use adapt-react-class or something?

p-himik17:10:22

Yes, since forwardRef returns a React component. And that [modal-panel] probably also needs to be wrapped in r/as-element.

p-himik17:10:33

Yes, r/as-element is needed: https://github.com/reagent-project/reagent/blob/a14faba55e373000f8f93edfcfce0d1222f7e71a/examples/material-ui/src/example/core.cljs#L31

Ben Lieberman17:10:38

I wish I had happened to navigate to that example instead of this one https://github.com/reagent-project/reagent/blob/master/examples/react-mde/src/example/core.cljs

Ben Lieberman17:10:44

got it working, though, thanks!

👍 1

parentheian19:10:24

is anyone else using clojure-lsp with reagent successfully? It seems like it cant resolve macros like r/with-let (I think because of the clj and cljs version fo reagent.core perhaps?)

2023-10-23

Channels