[SalesForce] Use Custom Label in Lightning Component array of String attribute

I want to build a component that looks like the Radio Group Alternate one of the Design System.

I want it pretty basic, so I just created 2 attributes, one String for the label and one String[] for the list of values. This works fine with static values like this:

<c:radioGroup label="Question" values="['Yes','No']"/>

enter image description here

However, as soon as I try to replace these values with Custom Labels (for translation purposes), my attributes aren't displayed as expected anymore:

enter image description here

I tried several ways to write it, things like that:

<c:radioGroup label="Question" values="{!'[\''+$Label.c.Yes+'\',\''+$Label.c.No+'\']'}"/>

Whatever I tried, it seems that using expressions just end up as a String and I can't make it behave like an Array of String or a List.
In console.log, I can see the first one being an Array, and second one just a static String:

enter image description here

Oblviously I would like to avoid using the JS Controller just for this.
Any idea ?

Best Answer

// Top component .cmp file

<aura:attribute type="String[]" name="values" default="[]" access="private" />

//Top component controller

({
  doInit: function(component, event, helper) {
    const values = [
      $A.get("$Label.c.MyLabel"),
      $A.get("$Label.c.MyLabel2"),
      $A.get("$Label.c.MyLabel3"),
      $A.get("$Label.c.MyLabel4"),
        /* ... */
    ];

    component.set('v.values', values);
 }
})

// Give columns to subcomponent

<c:radioGroup label="Question" values="{! v.values }" />
Related Topic