Repository navigation
Key prop and keyed function #124
Description
Hi!
I was wondering, is there any way to activate a warning when not using a key when mapping over a collection? Usually React print it like "…bla bla bla use a key…", and it’s sometimes boring, but in the end, it’s simpler to figure out where a key is missing.
If not, maybe I can try to implement it in a PR?
Activity
maddie927 commentedon Jul 2, 2020
If you have any ideas on how to do it that'd be great! Unfortunately the way React does this doesn't really translate to PS. In JS/JSX, elements passed as extra jsx arguments skip the warning, while elements passed as an array (or nested arrays) warn:
But in PS we have
ReactComponent { children :: Array JSX }, which essentially forces everything into the warning case. Since we really don't want to spew thousands of warnings we instead usecreateElement.apply(null, ["div", props].concat(props.children)).It's possible an alternate api would be able to handle this better, using some concept of "Renderable" where both
JSXandArray JSXare renderable. That along with do-notation could make that possible, but it might also introduce performance issues in large apps.ghivert commentedon Jul 15, 2020
Sorry for the long response delay.
For sure, but does it really help for code readability and maintenance? Because it adds another layer, etc. Here, the api is really simple and it’s cool: just give an array of children and that’s fine. I’m not sure the tradeoff is worth it. 😕
I didn’t know how React is handling that, and it seems hard to translate this in PS. I can try to get a
Renderableanyway, to see how it can be achieved in PS. Maybe that way we can explore and push a little further? Unfortunately I’m taking holidays the next two weeks, but I can try it when I’m back.maddie927 commentedon Jul 15, 2020
No worries, I don't know that it's worth it either. If you feel like taking a stab at it that's cool, but I don't think there's much need for it.