Lists and Keys

Subject: React

🔍 What is a List in React?

In React, a list refers to an array of data rendered dynamically using JSX.

React commonly uses JavaScript’s .map() method to display lists.

🧠 Why Render Lists?

  • Display items from data (users, products, tutorials)
  • Render reusable UI blocks from arrays
  • Keep UI synced with data (tables, menus)

✅ Basic Example: Rendering an Array

🚀 Try it in Compiler

🔍 Output:

🚀 Try it in Compiler

⚠️ Why You Need a key Prop

Every element in a rendered list must include a key prop:

🚀 Try it in Compiler

✅ Reason:

  • Helps React identify which items changed
  • Enables efficient DOM updates
  • Avoids rendering bugs in reordering

🔑 Best Practices for Keys

✅ Good Key❌ Bad Key
item.id (unique)index (only if static)
uuid or DB IDRepeated strings like "1"

If the order of items changes, using indexes can cause bugs in React rendering.

🧪 Realistic Example: Rendering Users

🚀 Try it in Compiler

🧰 Rendering Components from a List

🚀 Try it in Compiler

📥 Example: Deleting List Items

🚀 Try it in Compiler

🔁 Updating a List Using State

🚀 Try it in Compiler

🧠 Summary

ConceptExplanation
List RenderingUse .map() to loop and render items in JSX
Key PropUnique identifier to help React manage updates
Best Key ChoicePrefer item.id over index
Dynamic UILists enable dynamic and interactive UIs

🔚 Final Thoughts

  • Lists and Keys are essential for repeatable, dynamic UIs
  • React won't warn if keys are missing, but performance suffers
  • Modularize: use components inside .map() for clean structure

👉 Check the Lists and Keys Cheat Sheet

Next: Lists Cheat