Fork me on GitHub
#reagent
<
2021-08-09
>
Johannes Neugschwentner Johannes20:08:54

hi guys, I got a question regarding the following (related to nested variadic-param children and the react :key thingy):

Johannes Neugschwentner Johannes20:08:07

we came up with the convention to basically use form2 components with the following function signature

[props & children]

Johannes Neugschwentner Johannes20:08:52

however, if I nest components more than once like that I get those 'react key' warnings in the browser

Johannes Neugschwentner Johannes20:08:42

I think it is because of the variadic thingy ... the children ... end up like [[children]] if you catch my meaning, and actually I think those vectors become sequences somehow (because I tried to flatten the vector but couldn't - and the repl spits out a seq if I play around with it)

Johannes Neugschwentner Johannes20:08:20

so even if I map-indexed over the children in the last/base component it warns in the console bout missing :key props ...

Johannes Neugschwentner Johannes20:08:27

only if I map-indexed every time I'm passing on them children the console stays clear of warnings, but I don't want to do that if I basically pass on children to another component I know to receive them as just a param ... or should I??

Johannes Neugschwentner Johannes20:08:29

because effectively only the very last component actually renders html, the others pass on children without renderin them, just like a param, right??

Johannes Neugschwentner Johannes20:08:20

I am quite a beginner in clojure and honestly, I don't know what to do or if to change the [props & children] convention or what the default/recommended way here is

p-himik21:08:29

With arbitrary children, just use into:

(defn my-component [props & children]
  (into [:div props]
    children))

Johannes Neugschwentner Johannes22:08:40

heyyyya!!!! that's working like a charm. in my case I add the props to some parent html tag in the component and the children are independent of those props, so I:

(into [:<>] children)
which works as well. thx a whole lot!!!

👍 2