A minimalistic ClojureScript interface to React.js
v 2020-06-19T00:00:35.171900Z

I am having hard time converting this React Material UI component to Reagent.

<Chip deleteIcon={<CloseIcon />}/>
I tried doing this, but it doesn’t work.
[:> Chip {:deleteIcon [:> (r/as-element [:> CloseIcon])] }]
Any ideas?

lukasz 2020-06-19T00:04:28.172400Z

Can you try [:> Chip {:deleteIcon (r/as-element CloseIcon) }]

v 2020-06-19T00:08:43.172900Z

Unfortunately it does not work 😞

lilactown 2020-06-19T00:29:35.173300Z

[:> Chip {:deleteIcon (r/as-element [:> CloseIcon]) }]

v 2020-06-19T00:31:25.174800Z


[:> Chip {:deleteIcon [:> CloseIcon]}] 
worked. What I didn’t know (not mentioned in the doc) is that I had to pass the onDelete function as a prop to make the Icon appear :man-facepalming:


I am surprised it works: I thought you had to use lilactown solution in material-ui

juhoteperi 2020-06-19T07:33:38.178600Z

Huh, I don't think that should work. Nothing is going to convert vectors in props to react elements. As-element is the correct way, as is used in the examples.

v 2020-06-19T16:02:33.180700Z

Hi there, I am trying to use Form-2 component to store the reagent state. As well as using react hooks to style my components. Unfortunately react hooks does not seem to mix well with. Here is the component. I have so far. Any ideas? 🙂

(defn multi-select [props]
  (let [is-open? (r/atom false)
        {:keys [onChange label options value]} (js->clj props :keywordize-keys true)
        classes (use-styles)]
    (fn [props]
        [:> Button {:on-click #(reset! is-open? true)}

lilactown 2020-06-19T16:06:55.181500Z

@vishal.gautam it always helps to explain in detail what the wrong behavior is when looking for help

lilactown 2020-06-19T16:07:38.182300Z

are you using the latest alpha version and configured it to support hooks?

v 2020-06-19T16:14:24.187300Z

Okay so I am using a Material UI React Library in ClojureScript. In this project I am using reagent version 1.0.0-alpha2 . I have also configured to support hooks. So the functionality that I am trying to build is a simple multi select menu component. When the user clicks the button, menu opens.. and the user can select w.e options… I am using reagent atom to store the logic to check if the menu is open or not. So the above component does just that, except that it does not have menu component added yet, only single button. I am simply trying to render the button on screen. However when I try to use this function, I don’t see the button at all

v 2020-06-19T16:15:10.187800Z

This is how I am using the component

[:>  multi-select {:label "Cuisines"
                   :on-change #(println "HANDLE CHANGE")
                   :options ["Burgers" "Kebab" "Pizza" "Pasta"]
                   :value []}]

lilactown 2020-06-19T16:41:46.188300Z

if you’re using :> I don’t believe you can use a form-2 component

lilactown 2020-06-19T16:41:57.188600Z

not sure about that, but that’s what I would assume

lilactown 2020-06-19T16:43:41.188900Z

yes that looks correct, reading this issue:

v 2020-06-19T16:49:16.189900Z

Thank you, i converted it to hoc and it worked

lilactown 2020-06-19T16:52:39.190200Z

I’m not sure that’s right either if you want to use both hooks and atoms

lilactown 2020-06-19T16:52:53.190600Z

the reagent docs don’t describe how to currently use hooks using the new compiler stuff 😕

v 2020-06-19T16:55:54.191800Z

I had to remove hooks and use hoc,, no luck with hooks 😞

lilactown 2020-06-19T16:58:11.192100Z

i’m not sure you can use ratoms with hoc tho?


I though you could use hooks with the new :f> keyword.

Alex 2020-06-19T22:33:23.193900Z

For folks using specs on their Reagent components, can you point me to any documentation for common representations of specs when working with Reagent i.e. specs representing React elements, hiccup forms, etc?