.map() returns a newly populated array with the results of a function that you call that iterates over every element in the calling array
if we want to loop through an array and display each value in JSX,we can do that using curly braces{ }. we would use our map functionon our arrayand we can use our curly braces within that loop to use the name of the array to collect all the elements and enter them
each list item needs a unique key. if you don’t have an explicit key to list items then react is gonna default to using indexes as keys
the purpose of a key is to help react identify where these items are,it gives them a very unique identifying code that allows them to be accessed added or removed depending on if they have that access code.Keys should be given to the elements inside of arrays and give them and give them a stable identity.
the spread operator is a parenthesis (…) of three dots. this helps expand an iterable objects into a list of arguments that can be read.
One thing that the spread operator does is that it will literally spread an array into separate arguments so that way it can be read independently. it can also be useful for a lot of different tasks that are used in javascript like copying an array over, concatenating or combining arrays, using math functions, using an array’s arguments, adding in an item to a list, adding it to state in react, combining objects, converting node list to an array.
if we had two different array, let’s call them array A and array B. and we use the spread operator on both of those arrays. we would declare a new array using …A, …B. once we’ve done that we have combined both of those arrays. Here’s an example of how it might look.
const A = ['1','2','3','4'];
const B = ['4','3','2','1'];
const AB = [...A, ...B];
console.log(AB); // Will result in ['1','2','3','4','4','3','2','1']
Code Sample from Medium.com
const fruits = ['🍏','🍊','🍌','🍉','🍍']
const moreFruits = [...fruits];
console.log(moreFruits) // Array(5) [ "🍏", "🍊", "🍌", "🍉", "🍍" ]
fruits[0] = '🍑'
console.log(...[...fruits,'...',...moreFruits]) // 🍑 🍊 🍌 🍉 🍍 ... 🍏 🍊 🍌 🍉 🍍
Code Sample from Medium.com
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() // 😂😂😂😂😂
The first step the developer does to pass the function between components is to pass arguments to the child component so that it can be accessed on the lower level, This is where you would add your function so that it could be passed down using this.function
The increment function searches through the array of people’s names tries to match it up to the original array And if it does match it will increase the count in that person’s name. After that the name of the person in the count will be replaced with the updated name and count.
You can pass a method from a parent component into a child component, by passing the function down from the parent level as an argument.
Then inside the child component you would you would incorporate it as a prop inside of another function that is activated in the child function. So that way as it’s called it also calls the parent function. We would then pass in the prop of the component we want like a name or title and it would update the state at the parent level.