Fork me on GitHub
#reagent
<
2020-06-19
>
Vishal Gautam00:06:35

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?

lukasz00:06:28

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

Vishal Gautam00:06:43

Unfortunately it does not work 😞

lilactown00:06:35

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

🎉 6
Vishal Gautam00:06:25

Nevermind

[:> 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:

❤️ 3
David Pham05:06:15

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

juhoteperi07:06:38

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.

👍 6
Vishal Gautam16:06:33

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]
      (r/as-element
       [:div
        [:> Button {:on-click #(reset! is-open? true)}
         label]]))))

lilactown16:06:55

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

👍 3
lilactown16:06:38

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

Vishal Gautam16:06:24

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

Vishal Gautam16:06:10

This is how I am using the component

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

lilactown16:06:46

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

lilactown16:06:57

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

lilactown16:06:41

yes that looks correct, reading this issue: https://github.com/reagent-project/reagent/issues/494

✔️ 3
Vishal Gautam16:06:16

Thank you, i converted it to hoc and it worked

lilactown16:06:39

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

lilactown16:06:53

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

Vishal Gautam16:06:54

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

lilactown16:06:11

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

David Pham17:06:55

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

alex22:06:23

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?