Lesson: 06 | Loop For

HTML

<template>
    <lightning-card>

    <p>Before: {fruits}</p>

        <button onclick={handleLoop}>Convert all the uppercase</button>

    <p>After: {fruitsUpperCase}</p>

    </lightning-card>    
</template>

Java Script

import { LightningElement } from 'lwc';

export default class ForLoopExample extends LightningElement {
  fruits = ['Apple', 'Banana', 'Orange', 'Grape'];

  fruitsUpperCase =[];

  handleLoop() {
    for (let i = 0; i < this.fruits.length; i++) {
      
        const fruit =  this.fruits[i].toUpperCase();

        this.fruitsUpperCase = [ ...this.fruitsUpperCase, fruit ];

    }
  }
}

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

Mastered by 11 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: 06 | Loop For

HTML

Lightning Web Components