301-class-03.md

Passing Functions as Props

React Docs - Lists and Keys

1. What does .map() return?
   • a modified version of the array the method was called on
   • e.g. another array or list
2. If I want to loop through an array and display each value in JSX, how do I do that in React?
   • You can use .map() to iterate through the array and display each element of the array
   • Curly braces are used to display the elements
   • <li>{string}</li>
3. Each list item needs a unique ____.
   • Key - only among siblings
4. What is the purpose of a key?
   • A key is a string attribute that is assigned to list items when generating a list using .map()
   • React uses keys to identify and track items that have been added/removed/modified
   • <li key={keyName.id}>{keyName.text}</li>
   • The key is assigned in the first li tag
   • it is common to use ids from data as key names - use the same id names that are assigned to rendered items

Spread Operator

1. What is the spread operator?
   • an operator represented with three dots (an elipsis)
   • it is used in function calls to expand iterable objects into an argument list
   • it is new to ES6
2. List 4 things that the spread operator can do.
   • it can spread an array passed into a function as separate arguments, making it easier to return a value when passing an array into methods such as Math.max()
   • Useful when using arrays as arguments
   • Can be used to concatenate arrays
   • Can be used for adding state to React
3. Give an example of using the spread operator to combine two arrays.

const fruit = [orange, apple, banana];
const veg = [kale, spinach, broccoli];
const fruitVeg = [...fruit, ...veg];

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

const fruit = ['orange', 'apple', 'banana'];
const veg = 'kale';
const fruitVeg = [...fruit, ...veg];

5. Give an example of using the spread operator to combine two objects into one.
   • from "How to Use the Spread Operator (…) in JavaScript" by Dr. Derek Austin:

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() // 😂😂😂😂😂

How to pass functions between components

1. In the video, what is the first step that the developer does to pass functions between components?
   • loops through an array with .map() to generate objects
2. In your own words, what does the increment function do?
   • iterates through an array and updates the state data based on the name of the person passed in
3. How can you pass a method from a parent component into a child component?
   • passed as props from the parent to child
4. How does the child component invoke a method that was passed to it from a parent component?
   • this.props.methodName()

Things I want to know more about

• How are spread operators used to add a new state to React?