在动态创建的选择框顶部插入一个空的选项框

Question

I am using Select Box from antd . In the following snippet, I dynamically create the Option in the select box and return to be part of the array named analyticalMethodtOptions .

let analyticalMethodtOptions =
  analyticalMethods &&
  analyticalMethods.map((aM, i) => (
    <Option key={i} value={aM.id}>
      {aM.name}
    </Option>
  ));

Now, I also want to add an empty Option bar at the top that does not have any value and set that to default. How could I do this?

I want to insert an empty option bar like:

<Option value=""></Option>

at the top of analyticalMethodtOptions so that the empty item is available at the top of select box.

I am using it later to render the select box as:

  <Select
            placeholder="Select the Analytical Method"
            showSearch={true}
            filterOption={selectSearchFilter}
            defaultValue=""
          >
            {analyticalMethodtOptions}
   </Select>

Answer 1

Declare an array and push one entry with empty value.

var selectOptions = []; selectOptions.push({ id: 'default', name: '' });

And copy the entries of analyticalMethodtOptions to above declared array "selectOptions"

selectOptions = selectOptions.concat(analyticalMethods);

Then

selectOptions = selectOptions.map((aM, i) => (
            <Option key={i} value={aM.id}>
                {aM.name}
            </Option>
        ));

Then in render

<Select>
    {selectOptions}
</Select>