Daily Reading 3
Passing Functions as Props
React Docs - lists and keys
What does .map() return?
An array that contains each element modified by the defined callback function passed into map().
If I want to loop through an array and display each value in JSX, how do I do that in React?
After the array is created, when it comes time to display, put the array in curly braces.
Each list item needs a unique __.
Key.
What is the purpose of a key?
To maintain a stable unchanging component state that can be latched onto. Helps React know what is being modified.
The Spread Operator
What is the spread operator?
The spread operator is … and will “explode” or “spread” an array into its individual elements when passed into a function. An example of when this is useful would be having a large array of numbers, trying to find the biggest individual number present, and passing it into a function that is expecting the individual numbers as arguments, and not an array.
the Spread operator means that the following: biggest( … [2, 6, 4, 9, 2]) is functionally identical to biggest(2, 6, 4, 9, 2)
List 4 things that the spread operator can do
Math functions against an array input Concatenation Adding something to state in React Adding an item to a list
Give an example of using the spread operator to combine two arrays
arrayA = [1, 2, 3] arrayB = [4, 5, 6]
arrayC = [… arrayA, … arrayB]
arrayC will then become [1, 2, 3, 4, 5, 6]
Give an example of using the spread operator to add a new item to an array
arrayA = [1, 2, 3]
arrayC = [0, … arrayA, 4, 5]
arrayC will then become [0, 1, 2, 3, 4, 5,]
Give an example of using the spread operator to combine two objects into one
objectA = {Coolness : 10}
objectB = {Practicality : 2}
objectC = {…objectA, …objectB}
objectC will then have both keyvalue pairs coolness : 10 and Practicality : 2.
Videos: How to Pass Functions Between Components
In the video, what is the first step that the developer does to pass functions between components?
Defines the function, and then passes the function down as a prop.
In your own words, what does the increment function do?
Receives a name, uses map to search through the existing people objects array for a matching name. If found, increment the value for that object, and destroy the previous version of the array of people objects by overwriting it with the newly incremented one.
How can you pass a method from a parent component into a child component?
passes the method down to the child as a prop.
How does the child component invoke a method that was passed to it from a parent component?
this.props.methodName(), assuming it has been correctly passed in as a prop.