Passing Functions as Props

Lists

Here we will use map to iterate over the elements of an array and produce a list, or actually, creat a component that renders a list with multiple elements, something similar to this:

In order to be able to render multiple HTML elements (like lis of ol or ul), loops will serve as a handy tool, the steps needed to complete the component are as follows:

1. Create a component that takes data from a parent element as props.
2. Create a variable that holds the list (here use map).
3. The return of the previous map will be li with needed data.
4. The component now shall return the full list (variable in step 2) as a ul.
5. Finally, the component shall be injected in ReactDOM.

Keys

Keys help React trace changes of an item, id and index can be used as keys, make sure where to define a key and make it unique, you can see example for where and where not to use keys and how to ensure it is unique here;

The Spread Operator ...

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.

• Dr. Derek Austin

Spread operators can be used for:

Copying an array

Concatenating arrays

Using Math functions

And many other uses, you can visit medium for more information.

How to Pass Functions Between Components

To pass fucntions between components follow the following steps:

1. Define the function in parent component.

2. Pass the function as aprop to the child component.

In our video a function called increment was used to add 1 to the count when a button is clicked.