Rendering List

• In React, you can render lists using array map method
• For each item in a list, you should pass a string or a number that uniquely identifies that item among its siblings.
• Usually, a key should be coming from your data, such as a database ID.
• React will rely on your keys to understand what happened if you later insert, delete, or reorder the items.

const products = [
  { title: 'Milk', id: 1 },
  { title: 'Butter', id: 2 },
  { title: 'Apple', id: 3 },
];

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);