Progromatically Populating Select Options

[CourtneyMenikheim]

Hello,

We are writing an application in Experience Builder and trying to use the select component to allow the user to determine which county they are looking at. The list of eligible counties is returned from a service query. The code in question is below:

let countySelectOptions = [];
      results.features.forEach(feature => {
        countySelectOptions.push({
          label: feature.attributes.Cty,
          value: feature.attributes.Cty
        });
      });

      let countySelect = <Select
        id="countyInput"
        className="querySearchInput"
        placeholder="Please select county to search"
      >
        {countySelectOptions.map((countySelectOption) => { return <Option value={countySelectOption.value}>{countySelectOption.label}</Option> })}
      </Select>;

      ReactDOM.render(countySelect, this.countySelectPlaceholder);

  This works for HTML <select> and <option> tags, but breaks when using the Jimu-ui Select and Option. We'd like to go with the jimu-ui components, since they look a bit more polished and are consistent with our app overall.

Any advice?

[Suming]

@CourtneyMenikheim The codes look good. I tried it in local storybook, and it works well. Could you please provide some screenshots that how it breaks , or throws error?