*Readings: Passing Functions as Props

React Docs - lists and keys

1. What does .map() return? We use the map() function to take an array of numbers and double their values. We assign the new array returned by map() to the variable doubled and log it.
2. If I want to loop through an array and display each value in JSX, how do I do that in React? We loop through the numbers array using the JavaScript map() function. We return a <li> element for each item. Finally, we assign the resulting array of elements to listItems
3. Each list item needs a unique __. 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.

The Spread Operator

1. 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.
2. List 4 things that the spread operator can do. Copying an array, Concatenating or combining arrays, Using Math functions, Using an array as arguments.
3. Give an example of using the spread operator to combine two arrays.

[…[“😋😛😜🤪😝”]] // Array [ “😋😛😜🤪😝” ] […“🙂🙃😉😊😇🥰😍🤩!”] // Array(9) [ “🙂”, “🙃”, “😉”, “😊”, “😇”, “🥰”, “😍”, “🤩”, “!” ]

const hello = {hello: “😋😛😜🤪😝”} const world = {world: “🙂🙃😉😊😇🥰😍🤩!”}

const helloWorld = {…hello,…world} console.log(helloWorld) // Object { hello: “😋😛😜🤪😝”, world: “🙂🙃😉😊😇🥰😍🤩!” }

1. Give an example of using the spread operator to add a new item to an array.

const fruits = [‘🍏’,’🍊’,’🍌’,’🍉’,’🍍’] const moreFruits = […fruits]; console.log(moreFruits) // Array(5) [ “🍏”, “🍊”, “🍌”, “🍉”, “🍍” ] fruits[0] = ‘🍑’ console.log(…[…fruits,’…‘,…moreFruits]) // 🍑 🍊 🍌 🍉 🍍 … 🍏 🍊 🍌 🍉 🍍

1. Give an example of using the spread operator to combine two objects into one.

const myArray = [🤪,🐻,🎌] const yourArray = [🙂,🤗,🤩] const ourArray = […myArray,…yourArray] console.log(…ourArray) // 🤪 🐻 🎌 🙂 🤗 🤩

How to Pass Functions Between Components

1. In the video, what is the first step that the developer does to pass functions between components? Created a function where the state he wanted to change is.
2. In your own words, what does the increment function do? In this scenario the increment function is finding the person’s name and increasing the count on the counter under their name.
3. How can you pass a method from a parent component into a child component? call the method with this.props in this example he calls the increment method and this.props.increment().
4. How does the child component invoke a method that was passed to it from a parent component? this.props.increment(this.props.name).

References

https://reactjs.org/docs/lists-and-keys.html https://medium.com/coding-at-dawn/how-to-use-the-spread-operator-in-javascript-b9e4a8b06fab https://www.youtube.com/watch?v=c05OL7XbwXU