Fork me on GitHub
#reagent
<
2020-01-06
>
jstuartmilne11:01:31

Im looking for a way to pass a prop as an element

jstuartmilne11:01:37

<Button
        variant="contained"
        color="secondary"
        className={classes.button}
        startIcon={<DeleteIcon />}
      >

jstuartmilne11:01:56

Tried the following

jstuartmilne11:01:01

(defn rec-toggle [{record? :record?}]

  [:> Button
   {:aria-label "Rec"
    :on-click (fn [] (rf/dispatch [:proxy/record! {:id @(rf/subscribe [:session/page])
                                                   :record? (not record?)}]))
    :startIcon (r/as-element [:> RadioButtonChecked] )
    ; :startIcon (if record? (r/as-element [:> RadioButtonChecked] )   (r/as-element [:> RadioButtonUnchecked]) )
    }
   "Record"
   ]
  )

jstuartmilne11:01:38

but it does not work if i inspect with React tools I see an element prop gets there <Memo/> but nothing gets rendered

jstuartmilne11:01:55

i also tried with (r/create-element RadioButtonChecked)

p-himik12:01:15

What is RadioButtonChecked?

p-himik12:01:03

Also, don't use subscribe in re-frame or JS event handlers. It creates a memory leak and AFAICT gradually degrades the performance.

jstuartmilne13:01:25

wow. thanks good advice meaning i should probably (let) first right?

jstuartmilne13:01:36

RadioButtonChecked is icon

jstuartmilne13:01:27

["@material-ui/icons/RadioButtonChecked" :default RadioButtonChecked]

p-himik13:01:31

You should deref (or @) the sub in the view itself. The subscription has to be dereferenced when the view is rendered.

jstuartmilne13:01:18

the view being the actual function meaning (defn my-component [] (let [someDeRef @(subscribe...] ....someHickup)

jstuartmilne13:01:57

BTW: Thanks a lot for the advice ๐Ÿ™‚

p-himik13:01:21

Yep, something like that. And then just use someDeRef in that dispatch. No problem. :)

valtteri13:01:03

@jstuartmilne (r/as-element ...) is the right way. Make sure youโ€™ve imported RadioButtonChecked properly and that youโ€™re using Material-UI >= 4.5.0

jstuartmilne13:01:02

@valtteri it works if i just render the icon

jstuartmilne13:01:10

but it doesnt work (render) if I pass it as an element

valtteri13:01:43

What version of material-ui are you using?

jstuartmilne13:01:11

"@material-ui/core": "4.2.0",
    "@material-ui/icons": "4.0.0",

jstuartmilne13:01:24

I'll try upgrading the version ๐Ÿ˜‰

valtteri13:01:45

Yep, startIcon and endIcon props were added in 4.5.0

jstuartmilne13:01:08

Thanks haha there was no way it was going to work then ๐Ÿ˜›

valtteri13:01:21

No problem. ๐Ÿ™‚