301-class-03.md

Lists and Keys

1. What does .map() return?

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

we loop through the numbers array using the JavaScript map() function. and render it to the DOM

3. Each list item needs a unique ____. key
4. What is the purpose of a key? Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

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.

We can refactor the previous example into a component that accepts an array of numbers and outputs a list of elements.

Keys

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

What is the spread operator?

When ...arr is used in the function call, it ‘expands’ an iterable object arr into the list of arguments.

“Spread operator to the rescue! It looks similar to rest parameters, also using ..., but does quite the opposite.

The … spread operator is useful for many different routine tasks in JavaScript, including the following:

1. Copying an array : Using the … spread operator is a convenient way to copy an array or combine arrays, and it can even add new items.

2. Concatenating or combining arrays

3. Using Math functions

4. Using an array as arguments : ince the spread operator “spreads” an array into different arguments, any functions that accepts multiple any number of arguments can benefit from use of the spread operator.

5. Adding an item to a list

6. Adding to state in React

7. Combining objects

8. Converting NodeList to an array