Fork me on GitHub
#reagent
<
2016-10-26
>
limist11:10:41

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.

mikethompson11:10:04

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

mikethompson11:10:30

So I'd read that warning litterly

mikethompson11:10:57

You have supplied a select with a null prop

limist11:10:59

@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...

limist11:10:52

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

mikethompson11:10:18

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

mikethompson11:10:18

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

limist11:10:05

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...

limist11:10:16

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

mccraigmccraig17:10:37

@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

mccraigmccraig17:10:36

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)

gowder17:10:42

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.

gowder17:10:31

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

mccraigmccraig17:10:27

@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

gowder17:10:18

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

mccraigmccraig17:10:53

what's your code now @gowder ?

gowder17:10:31

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"}])}))
and the root level home-page component has just [line-component line-datom] rather than [line-component @line-datom] -- i.e., derefing inside line-component rather than outside of it

gowder17:10:53

(otherwise the same)

gowder17:10:55

ok, I have a totally hackish workaround that works

gowder17:10:24

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

mccraigmccraig17:10:35

ohhh, i see the problem... my bad

gowder17:10:40

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

gowder17:10:49

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

gowder17:10:24

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

gowder17:10:40

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

mccraigmccraig17:10:52

(i'm too used to re-frame)

mccraigmccraig17:10:29

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

gowder17:10:36

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

gowder17:10:30

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

mccraigmccraig17:10:41

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

gowder17:10:29

oooh. THAT inner function!

gowder17:10:16

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

gowder17:10:34

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

mccraigmccraig17:10:07

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