Seeing this error message after upgrading to reagent 0.6.0 and re-frame 0.8.0; how to go about debugging please? Does the error message mean it's definitely a <select> element at fault?

react.inc.js:20209 Warning: `value` prop on `select` should not be null. Consider using the empty string to clear the component or `undefined` for uncontrolled components.

The new version of React that comes with 0.6.0 is stricter. It warns you about silly things you have done.

So I'd read that warning litterly

You have supplied a select with a null prop

@mikethompson Yes, a harsher schoolmaster is a-ok by me. 🙂 But this is someone else's code, and I'm not fluent in reagent/react yet...

Where could i rtfm about this "null prop" you speak of, please?

https://developer.mozilla.org/en/docs/Web/HTML/Element/select

From the looks of that warning you are doing something like this: <option value=null >Value 1</option>

Which in hiccup will be [:option {:value nil} ....]

Thanks, that's what I thought too, but I am passing in blank strings for the init values for the one select in the form; will check again...

@mikethompson And BTW, the new(er) re-frame 0.8.0 docs deserve much praise: well-organized, clearly-written, and spiced with humor throughout. 👍

@gowder you will need something in :component-did-update too - :component-did-mount is only called once. have a look at https://github.com/Day8/re-frame/blob/master/docs/Using-Stateful-JS-Components.md which is from the re-frame docs, but the inner component is all vanilla reagent

https://facebook.github.io/react/docs/react-component.html is worth a scan as well to help understand the react component lifecycle (though beware - lots of stuff in there isn't generally used with reagent unless you are interacting with js react components)

thanks @mccraigmccraig. At this point I'm trying component-did-update, component-will-update and component-will-receive-props, in various combinations, all pointing to show-line-chart. I've also moved the deref-ing to the top-level component, just to make sure. But still no dice. I've drilled down into it some with a bunch of debugging console.log calls. It looks like when I reset! the ratom, it does get the new data, and the show-line-chart function does get called--- it actually gets called 3 times now, once for each of those lifecycle methods I mentioned above. But when it gets called, it gets called with the old data, not the new contents of the ratom.

(the previous snippet is obsolete, this is the code that's behaving as noted just now: https://gist.github.com/paultopia/3b79596a90131eb9a1225c7147efef48

@gowder pass the atom itself to line-component, rather than the value deref'd from the atom - then deref the atom during render - that's how reagent tracks that the component will need updating when the atom's value changes

trying that now... hmm. when I do that, the show-line-chart function doesn't get called at all.

what's your code now @gowder ?

now line-component is

(defn line-component
  [chart-datom]
    (reagent/create-class
     {:component-did-mount #(show-line-chart @chart-datom)
      :component-will-update #(show-line-chart @chart-datom)
      :component-will-receive-props #(show-line-chart @chart-datom)
      :component-did-update #(show-line-chart @chart-datom)
      :display-name        "chart-component"
      :reagent-render      (fn []
                             [:div {:class "ct-chart ct-perfect-fourth"}])}))

(otherwise the same)

ok, I have a totally hackish workaround that works

it appears that the only way to get show-line-chart to be called is to deref the atom in the root level component

ohhh, i see the problem... my bad

but the only way to get the correct data to it is to deref it in line-component

so I'm seriously just doing both by passing it as two arguments, viz:

(defn home-page []
  [:div
   [:h2 "Welcome to Reagent"]
   [:p (test-jstat [[1 2] [3 4] [5 6]])]
   [:p [:button {:on-click #(switch-line-chart line-datom)} "switch charts"]]
   [line-component @line-datom line-datom]])

(defn line-component
  [chart-data chart-datom]
    (reagent/create-class
     {:component-did-mount #(show-line-chart @chart-datom)
      :component-will-update #(show-line-chart @chart-datom)
      :component-will-receive-props #(show-line-chart @chart-datom)
      :component-did-update #(show-line-chart @chart-datom)
      :display-name        "chart-component"
      :reagent-render      (fn []
                             [:div {:class "ct-chart ct-perfect-fourth"}])}))

that can't be the correct way to do it, but for some bizarre reason it works

(i'm too used to re-frame)

for type-3 components, your inner render-fn signature has to match the outer fn signature

I still haven't learned re-frame, maybe this would make everything lots easier 🙂

(do go on? he says confusedly but knowing that great wisdom is about to appear...)

try just passing the atom, and derefing it in the :reagent-render with @chart-datom

oooh. THAT inner function!

I thought you were talking about show-line-chart and I was thinking "huh, but the signatures DO match!"

that will require some restructuring, but I think that's enough that I can figure out how to work it. thanks so much @mccraigmccraig !

yw @gowder , glad i could get past the cobwebs in my brain 🙂