In React syntax, {} can be placed around an array to use it as a list of elements.
.map() may be used to programmatically return React elements out of a JS array argument.
Items in a list require unique respective keys (index values may be used if other unique data is not available, but this use has limitations). Keys only have to be locally unique (among sibling components).
Keys are used to identify specific elements during React events like addition, editing, or removal.
In JS, the Spread Operator ... has multiple uses to affect objects (especially arrays). The spread operator:
…can precede an array to allow surrounding code to operate as if the array were a separate list of JS objects (like multiple arguments in a function). This can then be used to copy or combine arrays, like:
const nums = [1, 2, 3]
const moreNums = [...nums, 4, 5]
to create an array of [1, 2, 3, 4, 5]
…can can be used with multiple Math. functions which require multiple arguments in order to pass in a single array.
…can be used to add to a React state (not otherwise possible with many traditional JS methods) by combining arrays.
…can combine object properties/methods into a new object (similar syntactic use as for arrays), like:
familyDog = {bark: true}
familyCat = {meow: true}
familyPets = {...familyDog, ...familyCat}