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);

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

  1. First step is to assign the ‘value’ as part of the Dropdown.Item:

                <Dropdown.Item
                  key={Math.random()}
                  text={item.currencyName}
                  image={item.flag}
                  value={item.value}
                  style={{ height: "70px", fontSize: "17px" }}
                  onClick={(event, item) => {
                    console.log(item);
                  }}
                />
    
    

    Then you can grab the ‘value’ from item passed by the onClick event.

    onClick={(event, item) => console.log(item.value)}
    

    So long as you set the ‘value’ and not the ‘text’ in the initial Dropdown this will also let the Dropdown handle displaying the correct value when it isn’t active

    Here’s a slightly simplified version of your code:

    const currencyDetails = [
        {currencyName: 'United States Dollars', value: 'USD'},
        {currencyName: 'Canadian Dollars', value: 'CDN'}
    ]
    const initialData = {currency: 'USD'}
    
    const CurrencyConverter = () => {
    
      const handleSelection = (e, value) => {
            console.log(value)
            alert(`"I Chose the value ${value.value}`)
      }
    
      return (
        <div className="currency-form">
          <Dropdown
            inline
            value={initialData.currency}
          >
            <Dropdown.Menu
            >
              {currencyDetails.map((item) => (
                <Dropdown.Item
                  key={item.currencyName}
                  value={item.value}
                  text={item.currencyName}
                  style={{ height: "70px", fontSize: "17px" }}
                  onClick={handleSelection}
                />
              ))}
            </Dropdown.Menu>
          </Dropdown>
        </div>
      )
    }
    
    

    To read more check out the documentation:
    https://react.semantic-ui.com/modules/dropdown/#usage-controlled

    Reply

Leave a Comment