Clojurians Log v2

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

<Chip deleteIcon={<CloseIcon />}/>

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

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

Unfortunately it does not work 😞

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

Nevermind

[:> Chip {:deleteIcon [:> CloseIcon]}] 

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

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.

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]]))))

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

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

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

This is how I am using the component

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

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

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

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

Thank you, i converted it to hoc and it worked

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

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

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

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

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

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?