Warning in console re select

[egli]

The console shows a warning, apparently the selects aren't coded properly

Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.
option
select
div
div
div
cmp@http://localhost:3000/js/out/reagent/impl/component.js:517:54
div
div
section
cmp@http://localhost:3000/js/out/reagent/impl/component.js:517:54
div
cmp@http://localhost:3000/js/out/reagent/impl/component.js:517:54 react-dom.inc.js:61:32

[plexus]

Yes, this is a difference between React and normal HTML. It's actually a more convenient model once you are used to it. (React docs)

In reagent that becomes something like this.

(defn my-select []
  (let [selected (reagent/atom "apples")]
    (fn []
      [:select {:value @selected :on-change #(reset! selected (.. % -target -value))}
       [:option {:value "apples"} "Apples"]
       [:option {:value "pears"} "Pears"]
       [:option {:value "oranges"} "Oranges"]])))

For an uncontrolled component use :default-value instead of :value (React docs).