re-frame 2022-03-04 | Slack Archive

I have a custom component but it doesn't let me use custom events, i.e.:

(defn tab-context [attrs & children]
  (when-let [on-foo (:on-foo attrs)]
    (on-foo)))

[:div
 [tab-context {:on-foo #(dipatch [:foo])}]]

it won't let me do it. First, it would try to convert on-foo to onFoo and complain "unknown event handler property". Okay, let's rename it. But even if I rename it, React still complains: "Invalid value for prop foo-handler on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM." So have do I do this?

p-himik11:03:34

More of a #reagent question. The error about <div> suggests that you set those attribute on a :div somewhere. Simply extract the attributes for the :div under its own key - exactly the way re-com does it with :attr. Also, don't call functions on render, unless you're absolutely certain that's the thing that must be done. Instead, use a form-3 component with the right :component-did-mount and maybe :component-did-update.

ag22:03:33

indeed, I missed my own piece of code where I was reading attrs (not in the example, in the real codebase). I apologize for unnecessary noise.

2022-03-04

Channels