Fork me on GitHub
#reagent
<
2019-10-18
>
emccue05:10:56

how can i un-auto-camelcase props to react components?

emccue05:10:15

[:> Reactcomp {:actually-snake-cased 10}]

emccue05:10:38

when i inspect the react that key is converted to actuallySnakeCased

emccue05:10:52

strings were the answer

kwladyka10:10:13

[mui/form-control
                             [mui/radio-group
                              [radio {
                                      :value "red"
                                      :label "Red pill"}]
                              [radio {
                                      :value "blue"
                                      :label "Blue pill"}]]]

kwladyka10:10:44

[mui/radio-group
                              (radio {
                                      :value "red"
                                      :label "Red pill"})
                              (radio {
                                      :value "blue"
                                      :label "Blue pill"})]

kwladyka10:10:38

When I use [radio ...] it doesn’t work in the meaning I can check 2 radio buttons at once.

kwladyka10:10:55

When I use (radio ...) it works as expected. I can choose only one.

kwladyka10:10:14

I use Material UI

kwladyka10:10:50

Full example

(defn radio [{:keys [form spec->msg]} {:keys [name label value] :as parameters}]
  [mui/form-control-label
   {#_#_:name name
    :value value
    :control (r/as-element
               [mui/radio
                #_(merge
                  #_{:on-change (partial fv/event->names->value! form)
                   :color "default"}
                  (-> (dissoc parameters :label)
                      (dissoc parameters :name)))])
    :label label
    #_#_:class (when (fv/?show-message form name) "error")}])
which is wrapped by
let [radio (partial util/radio {:form form
                                                       :spec->msg spec->msg})]
And this radio above is used below
[mui/form-control
                             [mui/radio-group
                              (radio {
                                      :value "red"
                                      :label "Red pill"})
                              (radio {
                                      :value "blue"
                                      :label "Blue pill"})]]

kwladyka10:10:26

generated HTML is the same comparing [] and ()

kwladyka10:10:08

Why this happening? It really confused me when I should use [] vs ()

juhoteperi10:10:18

@kwladyka What material-ui version are you using?

kwladyka10:10:41

"@material-ui/core": "^4.5.1",

juhoteperi10:10:47

Hmh, should work. Some components presume the children to be certain Component classes, so Reagent throws them off as it creates it's own components, but radio-group uses Context so it should matter if there are some extra components between radio-group and radio.

kwladyka10:10:25

this is my only one idea. Can I make some rules from this when to use [] vs ()?

kwladyka10:10:44

Or use always [] unless something doesn’t work?

kwladyka10:10:36

It was hard to figure out. I don’t want to repeat it in the future 🙂

khellang10:10:27

has anyone else experienced issues with :advanced optimizations and reagent props?

khellang10:10:12

I'm doing some reactify-component -> HOC -> adapt-react-class magic and thinking that might be screwing it up