Retrive the value from Semantic UI drop down item?

Is there any way to retrieve the dropdown items value? when the on-click handler gets called it doesn’t the value, Instead, it returns the text and IMG component.
And also the on onchange handler attached to dropdown never gets triggered

import React from "react";
import { Dropdown, Item } from "semantic-ui-react";
import { connect } from "react-redux";
import "./currency.style.css";

const CurrencyConverter = ({ currencyDetails, initialData }) => {
  const handleSelection = (e) => {
    alert();
  };

  return (
    <div className="currency-form">
      <div className="selected-Country">
        <img src={initialData.flag} width="30px" height="30px" />
      </div>
      <Dropdown
        inline
        text={initialData.currency}
        
      >
        <Dropdown.Menu
          
        >
          {currencyDetails.map((item) => (
            <Dropdown.Item
              key={Math.random()}
              text={item.currencyName}
              image={item.flag}
              style={{ height: "70px", fontSize: "17px" }}
              onClick={(event, item) => {
                console.log(item);
              }}
            />
          ))}
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
};

const mapStateToProps = ({ currency: { currencyDetails } }) => ({
  currencyDetails,
});
export default connect(mapStateToProps, null)(CurrencyConverter);

20 thoughts on “Retrive the value from Semantic UI drop down item?”

Leave a Comment