Lesson: 12 | Add new element to an Array

Description

Some common array methods you can use in LWC

HTML

<template>
    <lightning-card title="Array Methods Example">
      <div class="slds-m-around_medium">
        <ul>
          <template for:each={names} for:item="name">
            <li key={name}>{name}</li>
          </template>
        </ul>
        <lightning-button-group>
          <lightning-button label="Add New Entry" onclick={handleAdd}></lightning-button>

        </lightning-button-group>
      </div>
    </lightning-card>
  </template>

Java Script

In this example, we have a list of names and four buttons that will perform different array methods when clicked.

import { LightningElement } from 'lwc';

export default class ArrayMethodsExample extends LightningElement {
   names = ['Alice', 'Bob', 'Charlie'];

  handleAdd() {
    this.names = [ ...this.names, 'Dave' ];
  }

 
}

Prev You need to login to have access to the quizzes. Next

Mastered by 10 users.

Lightning Web Components

A. Component Reference (27 lessons)

B. Lightning Web Components | Utilities (11 lessons)

C. Lightning Web Component Guide (41 lessons)

D. Java Script Methods for LWC (23 lessons)

E. HTML (18 lessons)

F. JavaScript (19 lessons)

Go to top

Login to your account

Lesson: 12 | Add new element to an Array

Description

Lightning Web Components