Passing Functions as Props
Why this topic matters
These topics are important because they are at the heart of data manipulation with React.
React Docs - lists and keys
- What does .map() return?
The method .map() returns a new array with values that have been modified a certain way from an input array.
- If I want to loop through an array and display each value in JSX, how do I do that in React?
We enclose the output variable you built up through maps in curly braces {}
- Each list item needs a unique __.
A unique key identifier.
- What is the purpose of a key?
It is a way for React to keep track what has changed as they can always be reassorted with the original array.
The Spread Operator
- What is the spread operator?
It is used to expand a literal object, usually an array, into its individual components.
- List 4 things that the spread operator can do.
The spread operator is a useful and quick syntax for adding items to arrays, combining arrays or objects, and spreading an array out into a function’s arguments.
- Give an example of using the spread operator to combine two arrays.
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arrComb = [...arr1, ...arr2];
- Give an example of using the spread operator to add a new item to an array.
let arr1 = [1,2,3];
let item1 = [4,5,6];
let arrComb = [...arr1, item1];
- Give an example of using the spread operator to combine two objects into one.
let obj1 = {count1: 3};
let obj2 = {count2: 6};
let arrComb = {...obj1, ...obj2};
How to Pass Functions Between Components
- In the video, what is the first step that the developer does to pass functions between components?
Create an increment function.
- In your own words, what does the increment function do?
An increment function is sort of the middle ground between the dom elements in the render portion and allows the state of the component to be updated.
- How can you pass a method from a parent component into a child component?
Pass it just like any other props. In the example, they pass it as this.increment.
- How does the child component invoke a method that was passed to it from a parent component?
Then child invokes it as this.props.increment
References
Things I want to know more about
Shallow vs Deep copying