purescript-pux
purescript-pux copied to clipboard
Combinator for adding incremented key attribute
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
@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.