SharePoint Framework Property Pane Choice Group options in an array

I am wanting to put a drop down list in the property pane:

PropertyPaneChoiceGroup('Marvels', { label: "Marvels", options: [ { key: 'Hulk', text: 'Hulk' }, { key: 'Thor', text: 'Thor' }, { key: 'Captain America', text: 'Captain America' }, { key: 'Ironman', text: 'Ironman' } , ], }) 

What I would like to do is to iterate over an array of names instead:

let marvelNames: string[] = ["Hulk", "Thor", "Cap", "Iron"]; PropertyPaneChoiceGroup('Marvels', { label: "Marvels", options: [ for (let name in marvelNames) { { key: "name", text: "name" } } ], }) 

I don't know how to achieve this.

I've only been working with JS/TS for a few weeks now and have much to learn.

1 Answer

You need to populate the values as below:

let marvelNames: string[] = ["Hulk", "Thor", "Cap", "Iron"]; var characters: IPropertyPaneChoiceGroupOption[] = []; marvelNames.map(function(item){ characters.push({ key:item, text: item }) }); 

After modify the property pane as:

PropertyPaneChoiceGroup('Marvels', { label: "Marvels", options: characters }) 

Also, ensure that you have the correct import statement which includes IPropertyPaneChoiceGroupOption somewhat as:

import { BaseClientSideWebPart, IPropertyPaneConfiguration, PropertyPaneTextField, PropertyPaneChoiceGroup, IPropertyPaneChoiceGroupOption } from '@microsoft/sp-webpart-base';