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.