Rendering lists

If you still remember, with Angular and Vue.JS, rendering lists also required the use of a specific syntax. In addition, to improve the rendering efficiency, we could assign a unique key to each element in the rendered lists so that Angular and Vue could easily recognize those and only re-render what had really changed. React also has the same concepts.

Rendering lists is really easy with React. Once again, since we can use standard JavaScript code and assign React elements to variables/constants, nothing prevents us from simply iterating over array elements using a map operation to construct our components.

Here's an example:

const membersList = [ 
  {id: 1, name: 'Sébastien'}, 
  {id: 2, name: 'Alexis'}, 
  {id: 3, name: 'John'}, 
  {id: 4, name: 'Doe'} 
]; 
const memberElements = membersList.map((member) =&gt...