Couldn't use match index (replace function second arg) as a key about react-string-replace HOT 4 OPEN

Unfortunately, prefixing doesn't solve this. What happens here is: replacer for the first regex divides original string to an array like
const firstStepTexts = [textBeforeFirstMatch, {firstRegexMatch}, textAfterFirstMatch]

If I run reactStringReplace on this array, I'd get something like this:

[[ someString, 
   <span key='second_0'>{matchFrom_textBeforeFirstMatch}</span>, 
   someOtherString
 ],

 <span>{firstRegexMatch}</span>,

 [ someString, 
   <span key='second_0'>{matchFrom_textAfterFirstMatch_0}</span>, 
   someOtherString, 
   <span key='second_1'>{matchFrom_textAfterFirstMatch_1}</span>,
   someAnotherString
 ],
]

Note two repeating keys second_0. I was very surprised to learn that react would omit rendering span with matchFrom_textAfterFirstMatch_0 text, because it has repeating key in the same array, although it has another items between them.

As I said, my actual workarounds are at least cumbersome.

from react-string-replace.

Hey @kadmil thanks for opening the issue. Hm, I'm still not clear on what causes duplicate keys. If you are using first_${i} and second_${i} when are they duplicated? I thought prefixing like you did would solve the problem

from react-string-replace.

Very handy lib, thanks !

I'm having the same issue with duplicate keys being produced. I've created a minimal Codesandox demonstrating the issue: https://codesandbox.io/s/5p570pnwx

from react-string-replace.

Hm... we could provide a unique key prop to the iterating function so that the calling code doesn't have to worry about it. Like:

const firstStepTexts = reactStringReplace(myText, regex1, (match, i, _, key) => <span key={key}>{match}</span>)

That would stop react from complaining, but it would also not do what keys are supposed to do which is remain consistent from render to render (provide a "stable identity" as the react docs say) so it feels like a duck tape solution to me.

I like the idea of having a "running" or "total" index for every time the replacement function is called, as suggested by @kadmil (sorry forgot to respond before!) but I'm not sure where that index would come from, we could keep track of an index internally but it's not clear to me how that would provide a stable identity to the rendered items, so we might have the same problem as above where it just gets react to be quiet but doesn't provide the real benefit of using keys.

from react-string-replace.