.map() is important because it simplifies looping over an array that is given and storing that info into a new array.
The spread operator simplifies certain operations on arrays and objects
Passing functions between components is important so devs do not have to repeat code!
.map() returns a new array that contains the results of the provided function on every element in the calling array. source
you can use .map() or .forEach()
Each list item needs a unique key
“React uses your keys to know what happened if you later insert, delete, or reorder the items” source
The spread operator allows strings and arrays in places where zero arguments are expected. source
4 things a spread operator can do are : make a shallow copy of an array(a copy whose props share the same refs. as those of the source obj. source), replaces the apply() function, to merge multiple objects into a single one, as well as overriding object properties.
const isDaytime = false;
const activity = ['sleep', 'study', ...(isDaytime ? ["party"] : [])];
`const obj1 = { foo: “bar”, x: 42 }; const obj2 = { bar: “baz”, y: 13 };
const mergedObj = { …obj1, …obj2 };` source
The first step is: Defining two components? or attaching handleClick to the onClick attached to the button.
The handleClick function is what needs to execute once the button is clicked by the user.
You can pass the method as a prop to the child return <Child handleClick={handleClick} />
Calling back to it as an argument in the child function