i am trying to make fluent UI dropdown component i want i have one button when i click on it so my any one item automatic select from dropdown and show in the dropdown input. automatic populate option let suppose now i when click on button i have set selected item "ASIFMA Committees" need to show in dropdown input and also show in in list as selected here is my code
import * as React from "react";
import { Button, Dropdown, makeStyles, Option, shorthands, useId } from "@fluentui/react-components";
const useStyles = makeStyles({
root: {
display: "grid",
gridTemplateRows: "repeat(1fr)",
justifyItems: "start",
...shorthands.gap("2px"),
maxWidth: "400px",
},
});
const CustomDropdown = () => {
const dropdownId = useId("dropdown-default");
const options = [
{
Name: "Advisory Councils",
CommitteeCode: null,
DivisionCode: "LEGCOMPLL",
},
{
Name: "ASIFMA Committees",
CommitteeCode: null,
DivisionCode: "CAPMARK",
},
// Add the rest of your API response here
];
const styles = useStyles();
const [selectedItems, setSelectedItems] = React.useState([]);
const [selectedText, setSelectedText] = React.useState("ASIFMA Committees");
const handleOptionSelect = (event, data) => {
const selectedOption = data.optionValue;
const selectedOptionText = options.find((option) => option.DivisionCode === selectedOption)?.Name || "";
setSelectedText(selectedOptionText);
if (selectedItems.includes(selectedOption)) {
setSelectedItems(selectedItems.filter((item) => item !== selectedOption));
} else {
setSelectedItems([...selectedItems, selectedOption]);
}
};
const setItem = () => {
const asifmaOption = options.find((option) => option.Name === "Advisory Councils");
if (asifmaOption) {
setSelectedText(asifmaOption.Name); // Update the selected text
handleOptionSelect(null, {
optionValue: asifmaOption.DivisionCode,
optionText: asifmaOption.Name,
selectedOptions: [asifmaOption.DivisionCode],
});
}
};
return (
<div className={styles.root}>
<label id={dropdownId}>Select an option</label>
<Dropdown
aria-labelledby={dropdownId}
placeholder="Select an option"
onOptionSelect={handleOptionSelect}
selectedOptions={selectedItems}
defaultValue={selectedText}
defaultSelectedOptions={[selectedText]}
// text={selectedText} // Pass selectedText to the Dropdown component
>
{options.map((option, index) => (
<Option key={index} value={option.DivisionCode}>
{option.Name}
</Option>
))}
</Dropdown>
<Button onClick={setItem}>Set Auto</Button>
</div>
);
};
export default CustomDropdown;
``` here is my code if anyone can help me
i want when i click on button automatic select item in dropdown.