| layout | page |
|---|---|
| title | 301.03 Reading Notes |
| permalink | /301-R3/ |
React: Lists and Keys (Described Here)
-
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}
-
Passing Functions Between Components (Seen Here)
- In order to pass a function between React components, first create a variable inside that function that will be assigned an object "copy" of a parent component's object (thus making it editable at the child component level). The function can then be set as a method among the child component's properties, thus giving child components access to a function that exists in other components.
- React dataflow and events: when to avoid re-rendering / selective re-rendering;