React 18

Rendering List

• Use array map method - map/convert each item to different type
• In JSX we can only use html or other react components. To render dynamic content use curly braces
• When mapping items, each item must have a unique key, which can be a string or a number
• When mapping items, each list item should have a key prop or a key property that uniquely identifies that item.
• React needs unique to keep track of our items. So later, when we add or remove items dynamically. React knows what part of the page should be updated.
• When rendering a list of items using the map method, we should give each item a unique key

const items = ["Chennai", "Bangalore", "Trivandrum", "Hyderabad"];

  return (
    <>
      <h1>List</h1>
      <ul className="list-group">
        {items.map((item) => (
          <li className="list-group-item" key={item}>{item}</li>
        ))}
      </ul>
    </>
  );