I've encountered an issue while working with React Semantic UI. I'm trying to render a dropdown and have configured it so that the selected option's text should display in the field. However, when I choose an option from the dropdown, instead of showing the selected value's text, the field remains empty.
Below is the code snippet for my dropdown:
options = [
{ key:"a", value: 1, name: 'uni', text: "first"},
{ key:"b", value: 2, name: 'duo', text: 'second'},
{ key:"c", value: 3, name: 'tri', text: 'third'},
{ key:"d", value: 4, name: 'quart', text: 'fourth'},
{ key:"e", value: 5, name: 'cinq', text: 'fifth'},
{ key:"f", value: 6, name: 'dernier', text: 'last'}
];
const handleDropDownSelect = (event, data) => {
onChangeValue(data.value)
};
const Dropdown = () => (
return(
<Dropdown
placeholder="abc"
fluid
selection
options={options}
onChange={handleDropDownSelect}
/>
);
<DropDownContainer className="Dropdown">
<Dropdown />
</DropDownContainer>
The function onChangeValue is used in another component where I receive the value from this dropdown and update other components. The problem lies in the fact that upon selecting an option, the associated text should be visible in the dropdown field rather than being blank.