Why React change keys with dot dollar ? ".$"

[jonlepage]

Can we get explanation why all keys are mutate with .$ by react ?

so we always need a hack like this to extract key ?!

const { key, type, props } = childnode;
const keyid = ( key as string ).split( '.$' )[1];

[bvaughn]

React does not set keys. Those come from your application code (or perhaps the 3rd party UI library that you're using). You can learn more about keys here: https://reactjs.org/docs/lists-and-keys.html#keys

[jonlepage]

React does not set keys. Those come from your application code (or perhaps the 3rd party UI library that you're using). You can learn more about keys here: https://reactjs.org/docs/lists-and-keys.html#keys

Hum weird ! i trying a random codesandbox on web and open debug tools !

And it also seem have keys with .$
But the codesandbox seem not have thirdParty UI library !
https://codesandbox.io/s/react-keys-zrthc?from-embed

I'll try to investigate, but it's very weird !

[bvaughn]

But the codesandbox seem not have thirdParty UI library !

The "3rd party code" is the CSSTransitionGroupChild component, in this case, coming from react-addons-css-transition-group. This is a pretty old addon library (last published around 4 years ago) and I'm not sure how it works, but it's the thing generating/assigning keys.

[irinakk]

This is the result of using React.Children.toArray or React.Children.map: #5541 (comment)

[jonlepage]

@irinakk Haaaa oki thanks a lot for your help ! i also using this on my side, so its maybe related !