+ Start a Discussion
Dileep KatariDileep Katari 

How to display text values one click after another?

Requirement: 
Three cities 
First Click on the lightning card
First city should display and continue to display
Second click on the lightning card
Second city should display and continue to display
Third click on the lightning card
Third city should display and continue to display

Ex : Upon first click, Tirupati should display 
Upon second click, Nellore should display
Upon third click, Kanchipuram should display
and finally all three city values shoudl continue to display like that 

I could come up with the below code but it is static. I am new to LWC, please help. Thank you.

JS : 
import { LightningElement,track } from 'lwc';
export default class ConditionalRenderingExample extends LightningElement {
 
 
  city;
  
  @track cityList =  ['Tirupati', 'Nellore', 'Kanchipuram'];
  
  showCityHandler(event){ 
  
   this.city = target.event.value;
   
    }   
  
}

HTML : 
<template>
       <lightning-card onclick={showCityHandler}>
         <template for:each={cityList} for:item="city">
               <p key={city}>{city}</p>
         </template>
       </lightning-card>
</template>
Soyab HussainSoyab Hussain
Hi Dileep Katari,

Use this code this will help you.
JS:
import { LightningElement,track } from 'lwc';
export default class ConditionalRenderingExample extends LightningElement {
 
  count = 0;
  @track selectedCity; 
  @track cityList =  ['Tirupati', 'Nellore', 'Kanchipuram'];
  
  showCityHandler(){   
      if(this.count && this.count === 3) {
        this.count = 0;
      } 
      this.selectedCity = this.cityList[this.count];
      this.count++;
   }   
  
}
HTML:
<template>
   <lightning-card onclick={showCityHandler}>
     <template for:each={cityList} for:item="city">
           <p key={city}>{city}</p>
     </template>
   </lightning-card>
</template>
If you found it useful please appreciate my efforts and mark it as the best answer.

LinkedIn:  https://www.linkedin.com/in/soyab-hussain-b380b1194/

Regards 
Soyab