reading-notes

reading notes for code fellows

Project maintained by dLeigh01 Hosted on GitHub Pages — Theme by mattgraham

Passing Functions as Props

This is all important when we are just learning how to use props and pass things between children and parents, because reading about it and doing it in class helps to cement the fact that we need to remember to add keys and how to move things from place to place to make them accessible.

React Docs - Lists and Keys

you can use {} to build a collection of elements and include them in JSX. EX

let arr = [1,2,3]
let newArr = arr.map(num => <li>{num}</li>);

and then you can place the array of items into a list using <ul>{newArr}</ul>. Usually this would be rendered within a component.

Keys help React keep track of what has been changed, added and removed, and should be given to the elements within our previous array for them to have a stable identity. The best way to assign a key is to use idx or id, which grabs the index of the element, or an ID from your data, respectively, though it is far better to use an ID, as if the order of items in the array changes it could cause issues. When you assign a key, it only matters in the context of the surrounding array, so it should be on the component rather than on the list item itself. Keys also only need to be unique among siblings, so they can be reused under different parents. Keys also are not passed in to your component as props, so if you need the value from a key, it needs to be passed explicitly as props with a different name.

  1. .map() returns an array.
  2. If I wanted to loop through an array and display each value in React, I would use .map() to go through each item and add it as an element, then render the resulting array.
  3. Each list item needs a unique key.
  4. The purpose of a key is for React to be able to track changes.

The Spread Operator

Spread syntax refers to an ellipsis ... used to expand an iterable object into a list of arguments. When you are trying to give an array to something expecting separate numbers, ex (1,2,3) you can pass in (...[1,2,3]) to get around the requirement. The spread operator works on any iterable object, including strings, and can be used to

A benefit of using the spread operator is that it copies by reference, leaving the original array alone, and meaning changes to the original array will not affect the copy as long as the changes are on a shallow level.

  1. The spread operator is …
  2. The spread operator can copy an array, use Math functions, add an item to a list, and combine objects
  3. newArr = [...arr1, ...arr2]
  4. arr2 = [...arr1, 4]
  5. newObj = {...obj1, ...obj2}

How to Pass Functions Between Components

  1. The first step the dev does to pass functions between componenets is make the increment arrow method
  2. Increment takes in a name and then uses map on state.people to check the list of names within people against the name passed in using an if statement, and then increments the matching count property to whichever name matches, then returns it with an updated count.
  3. You pass the method in as props using this.
  4. Call call the method that has been passed down using this.props.

Things I want to know more about

[< table of contents]

[< home]