reading-notes

Class 03 Reading: Passing Functions as Props

Resources

Reading Statement

Why this topic matters as it relates to what I am studying in this module?

React Docs - Lists and Keys

  1. What does .map() return?

.map() returns a new array

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

By using .map()

  1. Each list item needs a unique __.

Element

  1. What is the purpose of a key?

A key is a special string attribute included when creating lists of elments. They help REACT identify which items have changed, are added, or are removed.

The Spread Operator

  1. What is the spread operator?

A useful and quick syntax for adding itmes to arrays, combining objects or arrays, and spreading an array out into a function’s arguments.

  1. List 4 things that the spread operator can do.

    1. Add items to arrays
    2. Combine objects/arrays
    3. Copying an array
    4. Adding to state in REACT

  2. 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 fewFruit = [‘🍏’,’🍊’,’🍌’] const fewMoreFruit = [‘🍉’, ‘🍍’, …fewFruit] console.log(fewMoreFruit) // Array(5) [ “🍉”, “🍍”, “🍏”, “🍊”, “🍌” ]

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

How to Pass Functions Between Components

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

Create the function wherever the state is that we are going to change

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

It takes in a person object. Loops throught the array to find a matching person object. Then using .map(), generates a new array with the updated count increment.

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

Just like you would any other prop, with dot notatation.

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

You could create a variable referencing the desired method, or you could simply use it in dot notation and pass it into the method being invoked.

Things I Would Like to Know More About

  1. I would like to know more about passing functions between components. The video makes it seem rather simple, but until I can practice it, it seems challenging.