I have a Link dropdown which changes a DropdownSection component which contains an array of options.

When I change to a different Link, I would like to set the default option of the DropdownSection to the second option if there is more than one option in the linkOptions array, as I don’t want to select the first “No Selection” option. E.g. if I select Link 2, it should select the “Three” option.

Currently, when I select a value in the DropdownSection and then change the Link dropdown, the selected option is blank.

E.g. Upon loading the app. Item 1 is the default selected Link dropdown:

After selecting the Link 2 option in the Link dropdown:

Example code of how I set the default option (using a component that wraps a React Fluent UI Dropdown component):

<DropdownSection
  label={linkOptions[0].text}
  options={item1Options}
  defaultOptionText={item1Options.length > 1 ? item1Options[1].text : "No Selection"}
  defaultOptionValue={item1Options.length > 1 ? item1Options[1].value : "0"}
/>

App:

const App = ({}) => {
  const linkOptions = [
    {
      text: "Link 1",
      value: "1",
    },
    {
      text: "Link 2",
      value: "2",
    },
    {
      text: "Link 3",
      value: "3",
    },
  ];

  const [link, setLink] = useState(linkOptions[0].value);

  const link1Options = [
    {
      text: "No Selection",
      value: "0",
    },
    {
      text: "One",
      value: "1"
    },
    {
      text: "Two",
      value: "2"
    },
  ];
  const link2Options = [
    {
      text: "No Selection",
      value: "0",
    },
    {
      text: "Three",
      value: "3"
    },
    {
      text: "Four",
      value: "4"
    },
  ];
  const link3Options = [
    {
      text: "No Selection",
      value: "0",
    },
    {
      text: "Five",
      value: "5"
    },
    {
      text: "Six",
      value: "6"
    },
  ];

  let linkDropdownSection = <></>;
  if (link === linkOptions[0].value) {
    linkDropdownSection = (
      <DropdownSection
        label={linkOptions[0].text}
        options={item1Options}
        defaultOptionText={item1Options.length > 1 ? item1Options[1].text : "No Selection"}
        defaultOptionValue={item1Options.length > 1 ? item1Options[1].value : "0"}
      />
    );
  } else if (link === linkOptions[1].value) {
    linkDropdownSection = (
      <DropdownSection
        label={linkOptions[1].text}
        options={item2Options}
        defaultOptionText={item2Options.length > 1 ? item2Options[1].text : "No Selection"}
        defaultOptionValue={item2Options.length > 1 ? item2Options[1].value : "0"}
      />
    );
  } else if (link === linkOptions[2].value) {
    linkDropdownSection = (
      <DropdownSection
        label={linkOptions[2].text}
        options={item3Options}
        defaultOptionText={item3Options.length > 1 ? item3Options[1].text : "No Selection"}
        defaultOptionValue={item3Options.length > 1 ? item3Options[1].value : "0"}
      />
    );
  }

  // @ts-ignore: next-line - Ignore event parameter
  const onLinkSelect: DropdownProps["onOptionSelect"] = (event: any, data: any) => {
    setLink(data.optionValue);
  };

  return (
    <>
      <main>
        {
          <section>
            <Dropdown
              defaultValue={linkOptions[0].text}
              defaultSelectedOptions={[linkOptions[0].value]}
              onOptionSelect={onLinkSelect}
            >
              {linkOptions.map((option) => (
                <Option key={`${optionId}-${option.value}`} value={option.value}>
                  {option.text}
                </Option>
              ))}
            </Dropdown>
            {linkDropdownSection}
          </section>
        }
      </main>
    </>
  );
};

DropdownSection:

const DropdownSection = ({
  label,
  options,
  defaultOptionText,
  defaultOptionValue,
}) => {
  const optionId = useId("option");

  return (
    <section>
      <div>
        <Label>{label}</Label>
        <Dropdown
          defaultValue={defaultOptionText}
          defaultSelectedOptions={[defaultOptionValue]}
          onOptionSelect={onContactSelect}
        >
          {options.map((option) => (
            <FluentUIOption key={`${optionId}-${option.value}`} value={option.value}>
              {option.text}
            </FluentUIOption>
          ))}
        </Dropdown>
      </div>
      <Divider />
    </section>
  );
};

You can see onLinkSelect is responsible for changing the Link dropdown as it calls setLink.