reading-notes

Software Development Reading Notes

View on GitHub

Readings: Passing Functions as Props

React Docs - lists and keys

map() method allows you to loop over every element in an array and modify or add to it and then return a different element to take that elements place

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.

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.

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];

Output [1,2,3,4,5,6]

const myVehicle = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
}

const updateMyVehicle = {
  type: 'car',
  year: 2021, 
  color: 'yellow'
}

const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}

Output: {
    "brand": "Ford",
    "model": "Mustang",
    "color": "yellow",
    "type": "car",
    "year": 2021
}

How to Pass Functions Between Components

create an increment function
It takes a variable and increments (changes) its value, and also returns this value. 
A parent component defines a function.
The function is passed as a prop to a child component.
The child component then invokes the prop.
The parent function is then called, usually changing something.
Then the parent component is re-rendered along with its children.
using references which is supported on class components and recently on functional components using hooks.

You can build collections of elements and include them in JSX using curly braces {}