reading-notes

Class 301.03

Notes

Readings

React Docs - lists and keys

1. What does .map() return?

   a new array

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

   we can use the .map() method

3. Each list item needs a unique __.

   key

4. What is the purpose of a key?

   it let’s react know which elements it can safely refresh

The Spread Operator

1. What is the spread operator?

   ..., it expands an iterable array

2. List 4 things that the spread operator can do.

   1. a copy of an array/onject
   2. concatenate arrays or objects
   3. spread elements of an array/object in another arr/obj
   4. pass elements of an arr/obj as args to a function

3. Give an example of using the spread operator to combine two arrays.

   const array1 = [1, 2, 3];
   const array2 = [4, 5, 6];
   const combinedArray = [...array1, ...array2];
   console.log(combinedArray); // Output: [1, 2, 3, 4, 5, 6]
   

4. Give an example of using the spread operator to add a new item to an array.

   const array = [1, 2, 3];
   const newItem = 4;
   const newArray = [...array, newItem];
   console.log(newArray); // Output: [1, 2, 3, 4]
   

5. Give an example of using the spread operator to combine two objects into one.

   const object1 = { name: 'John', age: 30 };
   const object2 = { city: 'New York', country: 'USA' };
   const combinedObject = { ...object1, ...object2 };
   console.log(combinedObject); // Output: { name: 'John', age: 30, city: 'New York', country: 'USA' }
   

How to Pass Functions Between Components

1. In the video, what is the first step that the developer does to pass functions between components?

   make sure that he’s operating at the top level

2. In your own words, what does the increment function do?

   it takes in an object, and iterates a count value

3. How can you pass a method from a parent component into a child component?

   pass it like you’d pass the other props.

4. How does the child component invoke a method that was passed to it from a parent component?

   in the video he passes {this.increment}, and then it’s called from the child component as {this.props.increment()}.

Things I want to learn more about

React Tutorial through ‘Declaring a Winner’ React Docs - Lifting State Up

References

• Google Bard and ChatGPT

This site is open source. Improve this page.