React Mastery / React Basics

List Rendering

📌 What is List Rendering?

List rendering means displaying a list of items (like an array of data) dynamically in the UI using .map().

React efficiently re-renders only the items that change, thanks to using keys.

🧠 Key Points:

  1. Use .map() to iterate over an array and return JSX elements.

  2. Always add a unique key to each list item.

  3. key helps React identify which items changed, added, or removed.

✅ Explanation of the code:

  • names Array: A simple list of names is stored in an array.

  • .map() Rendering: The map() function loops through each name and returns a <li> element for it.

  • key Prop: Each <li> has a unique key (here, the index) to help React identify elements efficiently.

🛑 What to Avoid

  • Avoid using index as key if the list can be reordered or updated.

  • Don’t forget the return keyword if using {} in arrow functions.

    {names.map((name, index) => {
  return <li key={index}>{name}</li>;
})}