Clojurians Log v2

You can't use React hooks in Reagent components: https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#hooks

that doc has an example on how to work around it

That solves that problem! Many thanks!

It looks like I should change the material-ui elements to make it compatible with Reagent. Is that right?

I see that with another react component it works, so the problem is specificaly with material-ui, but I was using it before with reagent.. I'll make a repo reproducing the problem in case someone can help me.

@jpsoares106 https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#hooks

:> can used as a workaround for now. Next Reagent version will make this easier.

I'm using :> and it doesn't work https://github.com/JpOnline/t1-error/blob/f7f496dae85963c9c5b765ab803d11d01c9ae91d/src/t1/main.cljs#L18

You can use hooks in reagent components but is a bit cumbersome. Here is an example from a personal project:

(def CardInner
  (r/reactify-component
   (fn []
     [c/Paper "worked"])))

(def AnimatedDiv (oget animated "div"))

(defn Card
  []
  (let [[props set] (useSpring (fn [] #js{:x 0 :r 0}))
        x (oget props "x")
        r (oget props "r")
        bind (useDrag (fn [drag]
                        (let [down? (oget drag "down")
                              [mx] (oget drag "movement")]
                          (set #js{:x (if down? mx 0)
                                   :r (if down? (/ mx 50) 0)}))))]
    (r/create-element
     AnimatedDiv
     (oset! (bind) "!style" #js{:transform (interpolate #js[x r] #(str "translateX(" %1 "px) rotate(" %2 "deg)"))})
     (r/create-element CardInner))))

(defn use-card []
[:div 
(r/create-element Card)])

When doing this, remember to make sure the component isn't re-mounting all of the time.