Fork me on GitHub
#re-frame
<
2020-08-15
>
Gleb Posobin05:08:51

Is there a way to do server-side rendering for re-frame?

Marcus18:08:58

Hi all! 🙂 I am new to clojurescript and reagent/re-frame. I have a problem with the following text input function. It renders nicely and state is updated but I get an error message from the browser: "A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa).". What have I missed? hmm..

(defn text [] [:input
               {:type "text"
                 :value @(rf/subscribe [:length])
                 :on-change #(rf/dispatch [:length-changed (-> % .-target .-value)])
              }])

Marcus19:08:37

It seems the problem is related to the function being called multiple times or something.. runs fine higher up in the call stack

Marcus19:08:10

before this code is called I have a cond function that only runs the text function in some cases.. not in the initial one

Marcus20:08:21

and the error is only given on the first rendering. so I guess it is related to initial state

Marcus20:08:26

indeed it seems related to the various form-x components.. need to read up on that

Gleb Posobin21:08:55

@marcus.akre This has to be a form-2 component (https://github.com/reagent-project/reagent/blob/master/doc/CreatingReagentComponents.md) I think, like this:

(defn text []
  (let [value (rf/subscribe [:length])
    (fn [] [:input
            {:type "text"
             :value @value
             :on-change #(rf/dispatch [:length-changed (-> % .-target .-value)])
            }])))

Marcus21:08:17

Yes. Thanks! 🙂 I just started reading about it. It seems to be the correct way.