Reading 301-03

Readings: Passing Functions as Props

1.What does .map() return?

If I want to loop through an array and display each value in JSX, how do I do that in React?
- const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) =>

{number}

);

Each list item needs a unique __.
What is the purpose of a key?
- A special string attribute you need to include when creating lists
- Helpd id whcic items have changed, added, or removed

What is the spread operator?
- Spreads the array into sep arguments
List 4 things that the spread operator can do.
- use math functions
- combine objects
- Adding to state in React
- copying an array
Give an example of using the spread operator to combine two arrays.

const myArray = [🤪,🐻,🎌] const yourArray = [🙂,🤗,🤩] const ourArray = […myArray,…yourArray] console.log(…ourArray) // 🤪 🐻 🎌 🙂 🤗 🤩
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]) // 🍑 🍊 🍌 🍉 🍍 … 🍏 🍊 🍌 🍉 🍍
Give an example of using the spread operator to combine two objects into one.
- const objectOne = {hello: “🤪”} const objectTwo = {world: “🐻”} const objectThree = {…objectOne, …objectTwo, laugh: “😂”} console.log(objectThree) // Object { hello: “🤪”, world: “🐻”, laugh: “😂” } const objectFour = {…objectOne, …objectTwo, laugh: () => {console.log(“😂”.repeat(5))}} objectFour.laugh() // 😂😂😂😂😂

In the video, what is the first step that the developer does to pass functions between components?
In your own words, what does the increment function do?
How can you pass a method from a parent component into a child component?
How does the child component invoke a method that was passed to it from a parent component?

Each list item needs a unique __.