reagent 2021-08-01 | Slack Archive

hi everyone, can anyone help me figure out the issue here?

(defn comp-1 []
  (let [[is-shown set-is-shown] (react/useState false)]
    [:div
     [:button {:id "auth-btn"
               :on-mouseenter #(set-is-shown true)
               :on-mouseleave #(set-is-shown false)}
      (when is-shown [:div "Authenticate"])]]))

I want the authenticate div to show when the button is hovered on. However, this returns an error:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See  for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (react-dom.inc.js:1493

Any idea what am I missing? don't get which of the rules described in https://reactjs.org/warnings/invalid-hook-call-warning.html I am breaking.

Ilan20:08:38

I also tried using useState as described https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md:

(defn com-1 []
  (let [[is-shown set-is-shown] (react/useState false)]
    (reagent/as-element
      [:div
       [:button {:id "auth-btn"
                 :on-mouseenter #(set-is-shown not)
                 :on-mouseleave #(set-is-shown not)}
        (when is-shown [:div "Authenticate"])]])))

But this just throws the same error...

Ilan20:08:20

nevermind, I got the issue. I was missing -> in order to use a function as React component

2021-08-01

Channels