we use the map() function to take an array of numbers and double their values. We assign the new array returned by map() to the variable doubled and log it
You can build collections of elements and include them in JSX using curly braces {}.
we loop through the numbers array using the JavaScript map() function. We return a <li> element for each item. Finally, we assign the resulting array of elements to listItemsBasic List Component Usually you would render lists inside a component.
We can refactor the previous example into a component that accepts an array of numbers and outputs a list of elements.
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity
The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys
Keys only make sense in the context of the surrounding array.
For example, if you extract a ListItem component, you should keep the key on the
Keys used within arrays should be unique among their siblings. However, they don’t need to be globally unique. We can use the same keys when we produce two different arrays
The spread operator is a useful and quick syntax for adding items to arrays, combining arrays or objects, and spreading an array out into a function’s arguments.
List 4 things that the spread operator can do.
1- Copying an array 2-Concatenating or combining arrays 3-Using Math functions 4-Using an array as arguments 5-Adding an item to a list
const arr1 = [1,2,3] const arr2 = [4,5,6] const arr3 = […arr1, …arr2] //arr3 ==> [1,2,3,4,5,6]
Give an example of using the spread operator to add a new item to an array. Give an example of using the spread operator to combine two objects into one.
const person = { name: ‘David Walsh’, gender: ‘Male’ }; const tools = { computer: ‘Mac’, editor: ‘Atom’ };
const summary = {…person, …tools};
In the video, what is the first step that the developer does to pass functions between components?
In your own words, what does the increment function do?
How can you pass a method from a parent component into a child component?
How does the child component invoke a method that was passed to it from a parent component?
Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor. Let’s see how this works in action.
In this section, we will create a temperature calculator that calculates whether the water would boil at a given temperature.
Our new requirement is that, in addition to a Celsius input, we provide a Fahrenheit input, and they are kept in sync.
Currently, both TemperatureInput components independently keep their values in the local n React, sharing state is accomplished by moving it up to the closest common ancestor of the components that need it. This is called “lifting state up”. We will remove the local state from the TemperatureInput and move it into the Calculator instead.
If the Calculator owns the shared state, it becomes the “source of truth” for the current temperature in both inputs. It can instruct them both to have values that are consistent with each other. Since the props of both TemperatureInput components are coming from the same parent Calculator component, the two inputs will always be in sync.
Let’s recap what happens when you edit an input:
React calls the function specified as onChange on the DOM . In our case, this is the handleChange method in the TemperatureInput component.
The handleChange method in the TemperatureInput component calls this.props.onTemperatureChange() with the new desired value. Its props, including onTemperatureChange, were provided by its parent component, the Calculator.
When it previously rendered, the Calculator had specified that onTemperatureChange of the Celsius TemperatureInput is the Calculator’s handleCelsiusChange method, and onTemperatureChange of the Fahrenheit TemperatureInput is the Calculator’s handleFahrenheitChange method. So either of these two Calculator methods gets called depending on which input we edited.
Inside these methods, the Calculator component asks React to re-render itself by calling this.setState() with the new input value and the current scale of the input we just edited.
React calls the Calculator component’s render method to learn what the UI should look like. The values of both inputs are recomputed based on the current temperature and the active scale. The temperature conversion is performed here. React calls the render methods of the individual TemperatureInput components with their new props specified by the Calculator. It learns what their UI should look like.