React Docs - lists and keys

What does .map() return? .map() returns an array the same length as the array is cycles through.

If I want to loop through an array and display each value in JSX, how do I do that in React? One can use the aa.map() function to loop through an array, affect its elements, and treturn an array of the same length with new elements.

Each list item needs a unique ____. key

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

The Spread Operator

What is the spread operator? 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. It looks like an elipse, i.e., “…”

List 4 things that the spread operator can do.

• Copying an array
• Concatenating or combining arrays
• Using Math functions
• Using an array as arguments
• Adding an item to a list
• Adding to state in React
• Combining objects
• Converting NodeList to an array

Give an example of using the spread operator to combine two arrays. const myArr1 = [1, 2, 3] const myArr2 = [4, 5, 6] const myArr3 = […myArr1, …myArr2] console.log(myArr3)// 1, 2, 3, 4, 5, 6

Give an example of using the spread operator to add a new item to an array. const myArr1 = [1, 2, 3] const addItems = [4, 5, …myArr1] console.log(myArr1)// 1, 2, 3, 4, 5

Give an example of using the spread operator to combine two objects into one. const objectOne = {hello: yes} const objectTwo = {world: also yes} const objectThree = {…objectOne, …objectTwo} console.log(objectThree) // Object { hello: yes, {world: also yes }

How to Pass Functions Between Components

In the video, what is the first step that the developer does to pass functions between components? Create a function at the level where the state is occurring.

In your own words, what does the increment function do? The increment function increments the value of somomething my one, or determines the next thing to happen.

How can you pass a method from a parent component into a child component? invoke a function using props, and pass along a name associated with the component to be affected.

How does the child component invoke a method that was passed to it from a parent component? The state change causes a rerender which passes down the new value through props.