Lists and Keys
Given the code below, we use the map() function to take an array of numbers and double their values. We assign the new array returned by map() to the variable doubled and log it:
Rendering Multiple Components
You can build collections of elements and include them in JSX using curly braces {}.
Basic List Component
Usually you would render lists inside a component.
Keys
Keys help React identify which items have changed, are added, or are removed.
Extracting Components with Keys
Keys only make sense in the context of the surrounding array.
Keys Must Only Be Unique Among Siblings
Keys used within arrays should be unique among their siblings. However, they don’t need to be globally unique.
Embedding map() in JSX
What does .map() return?
map() function returns a map object(which is an iterator) of the results after applying the given function to each item of a given iterable (list, tuple etc.) … fun : It is a function to which map passes each element of given iterable.
If I want to loop through an array and display each value in JSX, how do I do that in React?
Each list item needs a unique String .
What is the purpose of a key?
A “key” is a special string attribute you need to include when creating lists of elements in React. Keys are used to React to identify which items in the list are changed, updated, or deleted. In other words, we can say that keys are used to give an identity to the elements in the lists
How to Use the Spread Operator (…) in JavaScript
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.
What is the spread operator?
In JavaScript, spread syntax refers to the use of an ellipsis of three dots (…) to expand an iterable object into the list of arguments.
What is … used for?
“Spread operator to the rescue! It looks similar to rest parameters, also using …, but does quite the opposite.” — JavaScript.info
What else can … do?
The he … spread operator is useful for many different routine tasks in JavaScript, including the following:
- Copying an array
- Concatenating or combining arrays
- Using Math functions
- Using an array as arguments
Give an example of using the spread operator to combine two arrays.
Give an example of using the spread operator to add a new item to an array.
Give an example of using the spread operator to combine two objects into one.
Examples of using …
[…[“😋😛😜🤪😝”]] // Array [ “😋😛😜🤪😝” ] […“🙂🙃😉😊😇🥰😍🤩!”] // Array(9) [ “🙂”, “🙃”, “😉”, “😊”, “😇”, “🥰”, “😍”, “🤩”, “!” ]
const hello = {hello: “😋😛😜🤪😝”} const world = {world: “🙂🙃😉😊😇🥰😍🤩!”}
const helloWorld = {…hello,…world} console.log(helloWorld) // Object { hello: “😋😛😜🤪😝”, world: “🙂🙃😉😊😇🥰😍🤩!” }
what is the first step that the developer does to pass functions between components
You can pass state values to a child component as a prop, but you can also pass functions directly to the child component like this: <ChildComponent
// The child component will access using actionName
actionName={this.actual_action_name}
/>
In your own words, what does the increment function do?
The Increment( ) function determines the next node at the same level. You can also increase the level of a node by one at a specified level
How can you pass a method from a parent component into a child component?
In order to do this, you need to do the following steps:
1- Create a callback function in the parent component. This callback function will get the data from the child component. 2- Pass the callback function in the parent as a prop to the child component. 3- The child component calls the parent callback function using props.
How does the child component invoke a method that was passed to it from a parent component?
In order to execute a function from a child component, you will need to use Refs. React supports a special attribute that you can attach to any component, that’s the ref attribute, it takes a callback function, and you can access the functions of the child component in the parent accessing this