Choose react key for a list with duplicate items

Question

I need to render a list with string items like ['a', 'b', 'c', 'a'], the items are allowed to be duplicate to each other, what is the proper way to choose a react key in {list.map(x => <span key={?}>{x}</span>)}?

Answer 1

This should work

{list.map((x,i) => <span key={`${x}-${i}`}>{x}</span>)}