function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ravi Panchal 8Ravi Panchal 8 

I am iterating this array and creating buttons from it. I want to show particular button active if it is clicked and also set buttons inactive if the other button is clicked. I am trying but not able make it work. I have given array and code below.

HTML 
<template for:each={showButtons} for:item="lang">
        <span data-value={lang.label} key={lang.label} onclick={choosePicklist}>
            <button class={button} onclick={handleBtnClick}>
                {lang.label} 
            </button>&nbsp;&nbsp;&nbsp;
        </span>
</template>
JS 
showButtons = [{"label":"First Button"},{"label":"Second Button"},{"label":"Third Button"},{"label":"Fourth Button"}];
 This is the code for please help me with this.

Thanks in advance,
Arun Kumar 1141Arun Kumar 1141

Hi Ravi,

1. HTML: 
<template>
    <template for:each={showButtons} for:item="lang">
        <span data-value={lang.label} key={lang.label} onclick={choosePicklist}>
            <button class={button} disabled={isButtonDisabled} onclick={handleBtnClick}>
                {lang.label}
            </button>&nbsp;&nbsp;&nbsp;
        </span>   
    </template>
</template>

2. JavaScript: 
import { LightningElement, track } from 'lwc';

export default class MyComponent extends LightningElement {
    @track showButtons = [{ "label": "First Button" }, { "label": "Second Button" }, { "label": "Third Button" }, { "label": "Fourth Button" }];

    @track isButtonDisabled = false;
   
    handleBtnClick() {
        this.isButtonDisabled = true;
    }
}

Hope this will be helpful.
Thanks!
 
SubratSubrat (Salesforce Developers) 
Hello Ravi ,

With this approach it will ensure that only one button can be active at a time.
  
HTML :

<template for:each={showButtons} for:item="lang">
  <span data-value={lang.label} key={lang.label} onclick={choosePicklist}>
    <button class={lang.active ? 'active' : ''} onclick={() => handleBtnClick(lang.label)}>
      {lang.label}
    </button>&nbsp;&nbsp;&nbsp;
  </span>
</template>


JS: 
import { LightningElement, track } from 'lwc';

export default class YourComponent extends LightningElement {
  @track showButtons = [
    { label: 'First Button', active: false },
    { label: 'Second Button', active: false },
    { label: 'Third Button', active: false },
    { label: 'Fourth Button', active: false }
  ];

  handleBtnClick(label) {
    // Update the active property of the clicked button
    this.showButtons = this.showButtons.map((button) => {
      return {
        ...button,
        active: button.label === label
      };
    });
  }
}
In the code above, the active property is added to each button object in the showButtons array. When a button is clicked, the handleBtnClick method is called with the corresponding label as the parameter. Inside this method, the showButtons array is updated using the map function to set the active property of the clicked button to true and all other buttons to false.

In the HTML template, the class attribute of each button is dynamically set based on the active property. If active is true, the active class is applied; otherwise, no additional class is added.

If this helps , please mark this as Best Answer.
Thank you.