Renderizado de Listas

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>

Usa la directiva v-for para crear un elemento por cada dato y :key para identificarlo.

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>
  )
}

Recorre la colección con map() dentro de JSX y asigna una key a cada elemento generado.

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' },
  ]
}

Usa el bloque @for para repetir el elemento y track para identificar cada dato.

Angular docs