I am using React semantic UI. I am rendering a dropdown. I want that when an option is selected only the image should show, in the current case only the name shows but my expected result is that only the image should show but both the image and the name should show in the dropdown options
Here is my dropdown code:
options = [
{ key:"a", value: 1, name: 'uni', text: "first", image: {avatar: true, src: require('../images/sqare.svg' )}},
{ key:"b", value: 2, name: 'duo', text: 'second', image: {avatar: true, src: require('../images/circle.svg' )}},
{ key:"c", value: 3, name: 'tri', text: ' third', image: {avatar: true, src: require('../images/triangle.svg' )}},
{ key:"d", value: 4, name: 'quart', text: 'fourth', image: {avatar: true, src: require('../images/hexa.svg' )}},
];
const handleDropDownSelect = (event, data) => {
onChangeValue(data.value)
};
const Dropdown = () => (
return(
<Dropdown
placeholder = "abc"
fluid
selection
options={options}
onChange={handleDropDownSelect}
/>)
<DropDownContainer>
<Dropdown />
</DropDownContainer>```