📄 Dynamic List Rendering in React

React makes it easy to render lists of data dynamically. Whether you're rendering user profiles, products, or to-do items — dynamic rendering is at the core of building interactive UIs.

🔁 Rendering Arrays with .map()

The most common way to render dynamic content in React is by using the map() function.

const fruits = ['🍎 Apple', '🍌 Banana', '🍇 Grape'];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

📦 Rendering Lists of Objects

You can also render more complex data, like an array of objects. Just remember to use a unique key for each item.

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

function UserList() {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

🧩 Rendering Components from Lists

Lists often render custom components dynamically using props.

function User({ name }) {
  return <li>👤 {name}</li>;
}

function UserList() {
  const users = ['Alice', 'Bob', 'Charlie'];
  return (
    <ul>
      {users.map((name, index) => (
        <User key={index} name={name} />
      ))}
    </ul>
  );
}

💡 Tips for Dynamic Lists

• Always use a unique key prop to prevent unnecessary re-renders.
• Avoid using index as key when the list can change.
• Use reusable components to keep your list logic clean.

📋 Summary

• Dynamic lists are rendered using map().
• You can render text, elements, or full components from arrays.
• Use unique keys to keep DOM updates efficient.