Reading-Notes

Reading Notes

React Docs - lists and keys

What does .map() return?

A manipulated array that differs from an original array.

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

Using .map() you can render the array into ‘listed items’ in an ‘unordered list’.

Each list item needs a unique __.

Keys

What is the purpose of a key?

They help React identify which items have changed, are added, or removed. When given to the element, the key gives it a stable identity. https://reactjs.org/docs/lists-and-keys.html

The Spread Operator

What is the spread operator?

The spread operator is a new addition to the set of operators in JavaScript ES6. It takes in an iterable (e.g an array) and expands it into individual elements.

The spread operator is commonly used to make deep copies of JS objects. When we have nested arrays or nested data in an object, the spread operator makes a deep copy of top-level data and a shallow copy of the nested data. Using this operator makes the code concise and enhances its readability. https://www.educative.io/answers/what-is-the-spread-operator-in-javascript

List 4 things that the spread operator can do.

• Copying an array
• Concatenating or combining arrays
• Using Math functions
• Using an array as arguments
• Adding an item to a list
• Adding to state in React
• Combining objects
• Converting NodeList to an array

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

const letterArray = [‘l’, ‘m’, ‘n’, ‘o’] const numberArray = [‘1’, ‘2’, ‘3’, ‘4’] const combineArray = […letterArray,…numberArray] it would read as: combineArray // l m n o 1 2 3 4

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

const someHeros = [‘batman’, ‘superman’, ‘hulk’] const moreHeros = [‘spderman’, ‘captainamerica’, …someHeros] it would read as : moreHeros // [“spiderman”, “captainamerica”, “batman”, “superman”, “hulk”]

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

const objectNight = {bye: “dark”} const objectDay = {hello: “light”} const objectTwilight = {…objectNight, …objectDay, evening: “dim”} it would read as: objectTwilight // {bye: “dark”, hello: “light”, evening: “dim”} const objectWit = {…objectNight, …objectDay, dim: () => {counsole.log (“dim”.repeat(3))}} objectWit.dim() // wit wit wit

Videos

How to Pass Functions Between Components

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

He creates a function where the state is.

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

increment = (name) => { let ppl = this.state.people.map( (p) => { if(p.name === name) { p.count++; } return p; }); this.setState({people: ppl}); }

The increment fuction firstly looks for the name object, within the people array, that is associated with the call (ie: Bob, Tina, Louise, Linda, or Gene). From there whichever object gets called (p) from the people array, if the name matches (or is strictly equal to) the name called, add one to that objects counter, then update the count on that (p) then update the whole array and refer to the new one as (ppl).

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

As a prop

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

I feel like I’m looking way too into this and can’t really find a direct straight forward answer, except the reoccuring ‘render’ and ‘return’?

This site is open source. Improve this page.