read301-3.md

Lists and Keys

1. What does .map() return? return an array

2. If I want to loop through an array and display each value in JSX, how do I do that in React?

3. Each list item needs a unique key__. key

4. What is the purpose of a key? keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity

• Keys only make sense in the context of the surrounding array. Keys Must Only Be Unique Among Siblings

Keys used within arrays should be unique among their siblings. However, they don’t need to be globally unique. We can use the same keys when we produce two different arrays:

How to Use the Spread Operator (…) in JavaScript

The spread operator is a useful and quick syntax for adding items to arrays, combining arrays or objects, and spreading an array out into a function’s arguments.

What is the spread operator?

InJavaScript, spread syntax refers to the use of an ellipsis of three dots (…) to expand an iterable object into the list of arguments. “When ...arr is used in the function call, it ‘expands’ an iterable object arr into the list of arguments.” — JavaScript.info

used for? “Spread operator to the rescue! It looks similar to rest parameters, also using ..., but does quite the opposite.” —

The spread syntax “spreads” the array into separate arguments.

What else can … do?

1. Copying an array
2. Concatenating or combining arrays
3. Using Math functions
4. Using an array as arguments
5. Adding an item to a list
6. Adding to state in React
7. Combining objects
8. Converting NodeList to an array

Copying an array Using the … spread operator is a convenient way to copy an array or combine arrays, and it can even add new items:

Using Mathfunctions

“The Math object's set of functions are a perfect example of the spread operator as the only argument to a function.” — @davidwalshblog on his blog