Rendering lists with React

React allows you to pass a collection of React elements or components as children in the form of an array. For instance:

   <ul> 
      {[ 
         <li key={0}>One</li>, 
         <li key={1}>Two</li>, 
      ]} 
   </ul> 

Collections of React elements or components must be given a special props property named key. This property lets React know which of the elements in the collection have changed, moved, or been removed in/from the array when an update occurs.

Getting ready

In this recipe, you will build a utility component that will map each item of an array to a component's props and render them as a list. Before you start, create a new package.json file with the following content:

{ 
  "scripts": { 
    "start": "parcel serve -p 1337 index.html" 
  }, 
  "devDependencies": { 
    "babel-plugin-transform-class-properties": "6.24.1", 
    "babel-preset-env": "1.6.1", 
    "babel-preset-react": "6.24.1", 
    "babel-core": "6.26...