Rendering List

Rendering List dengan for:each

Metode utama untuk rendering list di LWC adalah menggunakan direktif for:each. Ini memungkinkan Anda untuk mengiterasi array dan merender elemen untuk setiap item.

<template>
    <ul>
        <template for:each={contacts} for:item="contact">
            <li key={contact.Id}>{contact.Name}</li>
        </template>
    </ul>
</template>

import { LightningElement, track } from 'lwc';

export default class ContactList extends LightningElement {
    @track contacts = [
        { Id: '001', Name: 'John Doe' },
        { Id: '002', Name: 'Jane Smith' },
        { Id: '003', Name: 'Bob Johnson' }
    ];
}

Catatan: Atribut key sangat penting untuk performa dan rendering yang benar. Key harus unik untuk setiap item dalam list.

Mengakses Index

Jika Anda perlu mengakses index item dalam list, Anda bisa menggunakan for:index:

<template>
    <ul>
        <template for:each={contacts} for:item="contact" for:index="index">
            <li key={contact.Id}>
                {index}: {contact.Name}
            </li>
        </template>
    </ul>
</template>

Conditional Rendering dalam List

Anda bisa menggabungkan conditional rendering dengan list rendering:

<template>
    <ul>
        <template for:each={contacts} for:item="contact">
            <li key={contact.Id}>
                {contact.Name}
                <template if:true={contact.IsActive}>
                    (Active)
                </template>
            </li>
        </template>
    </ul>
</template>

Rendering List Kompleks

Untuk list yang lebih kompleks, Anda mungkin ingin menggunakan komponen child untuk setiap item:

<!-- parentComponent.html -->
<template>
    <ul>
        <template for:each={contacts} for:item="contact">
            <c-contact-item key={contact.Id} contact={contact}></c-contact-item>
        </template>
    </ul>
</template>

<!-- contactItem.html -->
<template>
    <li>
        <div>{contact.Name}</div>
        <div>{contact.Email}</div>
    </li>
</template>

Handling Events dalam List

Ketika bekerja dengan list, Anda sering perlu menangani events untuk item individu:

<template>
    <ul>
        <template for:each={contacts} for:item="contact">
            <li key={contact.Id}>
                {contact.Name}
                <button onclick={handleClick} data-id={contact.Id}>View Details</button>
            </li>
        </template>
    </ul>
</template>

handleClick(event) {
    const contactId = event.target.dataset.id;
    // Lakukan sesuatu dengan contactId
}

Sorting dan Filtering

Seringkali Anda perlu mengurutkan atau memfilter list sebelum merender:

get sortedContacts() {
    return [...this.contacts].sort((a, b) => a.Name.localeCompare(b.Name));
}

get activeContacts() {
    return this.contacts.filter(contact => contact.IsActive);
}

Kemudian, gunakan getter ini dalam template Anda:

<template>
    <h2>Sorted Contacts</h2>
    <ul>
        <template for:each={sortedContacts} for:item="contact">
            <li key={contact.Id}>{contact.Name}</li>
        </template>
    </ul>
    <h2>Active Contacts</h2>
    <ul>
        <template for:each={activeContacts} for:item="contact">
            <li key={contact.Id}>{contact.Name}</li>
        </template>
    </ul>
</template>

Handling Empty Lists

Penting untuk menangani kasus ketika list kosong:

<template>
    <template if:true={contacts.length}>
        <ul>
            <template for:each={contacts} for:item="contact">
                <li key={contact.Id}>{contact.Name}</li>
            </template>
        </ul>
    </template>
    <template if:false={contacts.length}>
        <p>No contacts found.</p>
    </template>
</template>

Dengan menggunakan teknik-teknik ini, Anda dapat membuat komponen LWC yang efektif dan efisien dalam menangani dan menampilkan data list.