How to get text of selected <Dropdown/> option in ReactJS?

Mr B picture Mr B · May 24, 2018 · Viewed 8k times · Source

I am working on a ReactJS application and I am trying to get the text of a selected option in a dropdown (Semantic UI component);

exposedCampaignOnChange = (e, {value}) => {
    this.props.campaignExposedSelected(value);
};

<Dropdown
    placeholder='Campaign Exposed To'
    fluid
    search
    selection
    multiple
    options={this.state.campaigns}
    onChange={this.exposedCampaignOnChange}
/>

The above code returns the value. this.state.campaigns is made up of an array of objects with value and text properties. In addition to the value, I also want to get the textvalue of the selected options.

Appreciate any guidance on the matter.

Answer

Hitesh Chaudhari picture Hitesh Chaudhari · May 24, 2018

You can use synthetic event's target property to get the text like:

exposedCampaignOnChange = (e, {value}) => {
  e.persist();
  console.log(e.target.textContent);
  this.props.campaignExposedSelected(value);
};

<Dropdown
  placeholder='Campaign Exposed To'
  fluid
  search
  selection
  multiple
  options={this.state.campaigns}
  onChange={this.exposedCampaignOnChange}
/>