I have created the Map<String,List> which we have created in the Javascript and displayed in lightning button. Now I am clicking on the button, variant is not getting updated. How can I change the variant?

Creation of the Map Code

this.actionUtilClass.executeAction(params).then(response => { 
            this.productCustom = response.result.IPResult;
            this.monthlyPrice = this.productCustom.LiabilityMonthlyPrice;
            this.yearlyPrice = this.productCustom.LiabilityYearlyPrice;
            this.defualtAttValue = false;
            var attributeName = '';
            let newStructure = [];
            this.monthlyVariant = 'brand';
            this.yearlyVariant = 'neutral';
            this.showMonthlyData = true;
            this.showYearlyData = false;
            this.showError = true;
            this.mapDataKey = 'attlabel.label'+'-'+'attValue';
            let mapAttData = new Map();
            let mapKeyBrand = new Map();
            let today = new Date();
            this.defualtDate = today.toISOString();
            let mapNewData = new Map();
                let attribute = newData;
                let label = attribute.AttributeLabel;
                let value = newData;
                let defualtValue = attribute.AttributeDefaultValue
                    let values = mapAttData.get(label);
                    if(newData.ProductAttributeValue == newData.AttributeDefaultValue){
                        value.ButtonVariant = 'brand';
                        value.ButtonVariant = 'neutral';
                    let values = [value];
                    mapAttData.set(label, values);
            mapAttData.forEach((values, label) => {
                this.structuredData.push({ label: label, values: values });

Click on the button

    const dataValue =  event.target.value;
   this.structuredData.forEach((value, key) => {
        if(value.values.ProductAttributeValue == dataValue){
            console.log('In If');
            value.ButtonVariant = 'brand';
            value.ButtonVariant = 'neutral';

HTML Code for Displaying the button

<table style="margin-left:5%">
            <template for:each={structuredData} for:item="attLabel">
                <tr key={attLabel.label}>
                    <td><lightning-formatted-text value={attLabel.label} style="color: #191919;font-size: 12px;font-weight: 600;letter-spacing: 0;line-height: 21px;"></lightning-formatted-text><lightning-helptext class="slds-p-around_medium lgc-bg" content="Product Attributes"></lightning-helptext></td>
            <lightning-button-group key={attLabel}> 
                <template for:each={attLabel.values} for:item="attValue">
                    <td key={attValue.ProductAttributeValue}>
                            <lightning-button label={attValue.ProductAttributeLabel} variant={attValue.ButtonVariant} onclick={handleClick} value={attValue.ProductAttributeValue}></lightning-button></td>

enter image description here

2 Answers 2


I don't know the specific reason behind it not working

but you could use -


To make it more dynamic you can set data-id in the button -

<lightning-button data-id={attValue.dataId} label={attValue.ProductAttributeLabel} variant={attValue.buttonVariant} onclick={handleClick} value={attValue.ProductAttributeValue}></lightning-button>
structuredData = [

            label: 11,
            values: [
                    ProductAttributeValue: '1',
                    buttonVariant: 'brand',
                    ProductAttributeLabel: 'child',
                    dataId: 'buttonOne'

if(value.values.ProductAttributeValue == dataValue){
 console.log('In If');
 const btn= this.template.querySelector(`[data-id="${value.dataId}"]`);
 btn.variant = 'success';

  • I am not getting the ProductAtrributeValue in console. It is coming as a undefined Commented Jan 27, 2023 at 7:56
  • I have added the JSON structure as well @Mukul Commented Jan 27, 2023 at 8:09
  • try this - value.values[0].ProductAttributeValue Commented Jan 27, 2023 at 9:53

Docs (emphasis mine):

Changes are detected when a new value is assigned to the field by comparing the value identity using ===. This works well for primitive types like numbers or boolean.
When manipulating complex types like objects and arrays, you must create a new object and assign it to the field for the change to be detected.

In order to trigger a rerender you should change the reference hold by structuredData. The spread syntax is what you're looking for.

Moreover in handleClick method value.values is an array, so it doesn't hold a property ProductAttributeValue, but its elements do:

    const dataValue =  event.target.value;

    this.structuredData.forEach((value) => {
        for (const btn of value.values) {
            if(btn.ProductAttributeValue == dataValue){
                console.log('In If');
                btn.ButtonVariant = 'brand';
                btn.ButtonVariant = 'neutral';
    // create a new array
    this.structuredData = [...this.structuredData];
  • Hi @RubenDG, I am getting the console.log as a undefined. Commented Jan 27, 2023 at 8:59
  • Hi @ShantanuMahajan, I updated the answer
    – RubenDG
    Commented Jan 27, 2023 at 9:27

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .