Notes on Passing Functions as Props

Lists and Keys

• What does .map() return?

An <li> element is returned for each array item that is addressed by the map() function as it loops through.

• If I want to loop through an array and display each value in JSX, how do I do that in React?

You could declare a separate variable and include it in JSX, or embed the expression in curly braces to inline the map() result.

• Each list item needs a unique __.

key, often an ID from the data.

• What is the purpose of a key?

To identify the items that have been altered, removed, or added.

The Spread Operator

• What is the spread operator?

The ... syntax which is a quick and simple way to alter arrays, combine objects/arrays, or “spread” arrays out into separate arguments in a function.

• List 4 things that the spread operator can do.

The spread operator can also use math functions, copy arrays, add an item to a list, or convert NodeList to an array (to name a few uses).

• Give an example of using the spread operator to combine two arrays.

const chris = ['c', 'h', 'r', 'i', 's'];
const yamas = ['y', 'a', 'm', 'a', 's'];

const chrisyamas = [...chris, ...yamas];

// The result of console.log(chrisyamas) would be an array that looks like:
// ['c', 'h', 'r', 'i', 's', 'y', 'a', 'm', 'a', 's']

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

const lastName = ['y', 'a', 'm', 'a', 's'];
const fullName = ['c', 'h', 'r', 'i', 's', ...lastName];

// The result of console.log(fullName) would be an array that looks like:
// ['c', 'h', 'r', 'i', 's', 'y', 'a', 'm', 'a', 's']

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

const nameObject = {name: "Chris Yamas"}
const dobObject = {dob: "09-16-1992"}
const colorPersonObject = {...nameObject, ...dobObject, favecolor: "purple"}
// The result of console.log(colorPersonObject) would be an object that looks like:
{ name: "Chris Yamas", dob: "09-16-1992", favecolor: "purple" }

How to Pass Functions Between Components

• In the video, what is the first step that the developer does to pass functions between components?

Creates an increment function and passes in a parameter of person or name to be able to pass through the objects and know which person is being changed.

• In your own words, what does the increment function do?

Loops through an array (in this case it is looping through the this.state.people[] array, and has arguments within the increment function to update the count through an incrementing (p.count++).

• How can you pass a method from a parent component into a child component?

With use of a function that targets the child components, in this case the developer is using map() in his increment function in terms of let ppl = this.state.people.map.

• How does the child component invoke a method that was passed to it from a parent component?

By using this such as this.increment or this.props.increment().

Things I want to know more about

I want to better understand the difference between what is being passed down and what is being passed up in the video example, I’m still a little confused on that.