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

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

when i inspect the react that key is converted to actuallySnakeCased

strings

strings were the answer

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

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

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

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

I use Material UI

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

let [radio (partial util/radio {:form form
                                                       :spec->msg spec->msg})]

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

generated HTML is the same comparing [] and ()

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

@kwladyka What material-ui version are you using?

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

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.

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

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

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

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

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

hmm, I think it's this issue I'm hitting; https://github.com/reagent-project/reagent/issues/389