List Rendering

Vuev-for + :key

<script setup lang="ts">
const users = [
  { id: 1, name: 'Ada Lovelace', email: 'ada@example.com' },
  { id: 2, name: 'Alan Turing', email: 'alan@example.com' },
  { id: 3, name: 'Linus Torvalds', email: 'linus@example.com' },
]
</script>

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.name }} - {{ user.email }}
    </li>
  </ul>
</template>

It uses the v-for directive to create one element per item and :key to identify it.

Vue docs

Reactmap() + key

function UserList() {
  const users = [
    { id: 1, name: 'Ada Lovelace', email: 'ada@example.com' },
    { id: 2, name: 'Alan Turing', email: 'alan@example.com' },
    { id: 3, name: 'Linus Torvalds', email: 'linus@example.com' },
  ]

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name} - {user.email}</li>
      ))}
    </ul>
  )
}

It iterates over the collection with map() in JSX and assigns a key to each generated element.

React docs

Angular@for + track

import { Component } from '@angular/core'

@Component({
  selector: 'app-user-list',
  standalone: true,
  template: `
    <ul>
      @for (user of users; track user.id) {
        <li>{{ user.name }} - {{ user.email }}</li>
      }
    </ul>
  `,
})
export class UserListComponent {
  readonly users = [
    { id: 1, name: 'Ada Lovelace', email: 'ada@example.com' },
    { id: 2, name: 'Alan Turing', email: 'alan@example.com' },
    { id: 3, name: 'Linus Torvalds', email: 'linus@example.com' },
  ]
}

It uses the @for block to repeat the element and track to identify each item.

Angular docs