5

I am creating a select option in LWC. From server side controller I am returning list of wrapper having key and value as below-

[{"key":"All Accounts","value":"00B7F000006l0B3UAI"}]

I the html file I am creating options using iteration as below. -

<select class="slds-select" id="select-01">
     <template for:each = {listViews} for:item="listViewItem">
        <option value={listViewItem.key}>{listViewItem.value}</option>
     </template>
</select>

Although, I am able to display data on the markup but But I am getting compilation error when I use it with the select option-

Missing key for element inside of iterator. Elements within iterators must have a unique, computed key value.

Any help would be appreciated

2 Answers 2

6

Whenever you use for:each you have to use key attribute in the child markup. If not it gives a compilation error.

From SF Docs:

Note that you must use a key to assign a unique value to each item in the list.

<select class="slds-select" id="select-01">
     <template for:each = {listViews} for:item="listViewItem">
        <option key={listViewItem.key} value={listViewItem.key}>{listViewItem.value}</option>
     </template>
</select>
2
  • 1
    It worked for me. This is the reason i like this platform. Thanks Pranay!! Mar 26, 2019 at 9:52
  • How to make any option is selected? among n number of option ,i need one value should be marked as selected Mar 16, 2021 at 10:05
3

For creating select list drop down in LWC, we may also use lightning-combobox.

You must log in to answer this question.

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