Combinator for adding incremented key attribute

[jmatsushita]

Hi there,

Thanks a lot for the great library. I'm quite new to purescript so please bear with me if this is trivial.

I've ran into problems with using preact as the react engine (I think related to the webpack aliasing combined with libraries that pull their own react instance), so I've switched to regular react and I'm getting a lot of warnings for missing unique key props.

I thought I'd try to write a combinator to automatically add an incremented key to children elements but I'm stuck. I'm just starting to understand the 'using do notation as a monoid' pattern, so I'm out of my depth with this.

I guess the api could be something like:

view :: State -> HTML Event
view count = withKeys $
  div do
    button #! onClick (const Increment) $ text "Increment"
    span $ text (show count)
    button #! onClick (const Decrement) $ text "Decrement"

And withKeys would automatically "traverse" the "tree" and add incrementing keys for each layer, i.e. "1" for the top div, and 1 2 and 3 for the first button, span and second button respectively.

Is that something that would be useful for others too maybe?

Cheers,

Jun

[shybyte]

@jmatsushita I would love to get rid rid of the key warnings too, but I can't assess if your approach is the best one.

When I create react components in javascript I get these warnings only when I use arrays of components. In this plain js translation of your purescript code I don't get warnings, because the children are added directly.

div({},
  button({onClick: increment}, "Increment"),
  'Count: ' + count,
  button({onClick: decrement}, "Decrement")
)

So I wonder if another approach would be to add children in pux also in this way (must be changed deep inside pux probably). On the other hand, I guess, it is difficult to match this approach with the generic https://github.com/bodil/purescript-smolder concept used by pux .

So probably your approach is more practical and doable without deep pux changes.