Reading 3

Lists and Keys

• What does .map() return? .map() will loop through an array, complete some form of data manipulation, and return a brand new array the same length of the original.
• If I want to loop through an array and display each value in JSX, how do I do that in React? The individual indexes ( .map(idx) ) that are needing to be displayed will be placed in a list. ```const myArray = [0,10,20]; let listItems = myArray.map((number =>
• number

);``` Then the listItems array is passed into a ul and rendered through reactDOM.render

• Each list item needs a unique key.

• What is the purpose of a key? A key will inform React if a list item has been altered, added, or removed.

  Spread Operators

• What is the spread operator? Using an (...) the spread operator expands iterables into a list of arguments.
• List 4 things that the spread operator can do.
  1. Expand interable into arugments 2. Copying Arrays 3. Concatenating Arrays together 4. Adding to State in React
• Give an example of using the spread operator to combine two arrays. firstArray = [1,2,3]; secondArray = [4,5,6]; finalArray = [...firstArray, ...secondArray]; console.log(finalArray); // [1,2,3,4,5,6]
• Give an example of using the spread operator to add a new item to an array. firstArray = [1,2]; newArray = [...firstArray, 3,4,5,6]; console.log(newArray); //[1,2,3,4,5,6]
• Give an example of using the spread operator to combine two objects into one object1 = {daytime: 'hello'} object2 = {nighttime: 'goodnight'} object3 = {...object1, ...object2, morning: 'good morning'} console.log(object3); // {daytime: 'hello', nighttime: 'goodnight', morning: 'good morning'}