In the code below, {...{key}} seems to be adding unique key indexes to the html tags, which I think is required by React. But how does this syntax work? I'm familiar with spread operator, but not sure how to put all of it together. This link https://reactjs.org/docs/lists-and-keys.html gives examples on key usage, but none use this syntax.
const App = () => {
const subStrings = testString.split(/(:.*?;)/)
return (
<div>
{
subStrings.map((s,key) =>
/(:.*;)/.test(s) ?
<mark {...{key}}>{s.slice(1,-1)}</mark> :
<span {...{key}}>{s}</span>
)
}
</div>
)
}