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

Question

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.

Hitesh Chaudhari · Accepted Answer · 2018-05-24 09:11:33Z

5

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}
/>

answered May 24, 2018 at 9:11

Hitesh Chaudhari

7151 gold badge7 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cerberus Over a year ago

Better not target, but currentTarget: github.com/DefinitelyTyped/DefinitelyTyped/issues/…

Andy Over a year ago

e.taget.innerHTML worked for me too as the output of the dropdown option was a div > span > text

Chetan Gawai · Accepted Answer · 2018-05-24 09:16:57Z

1

Semantic ui react Dropdown onChange event takes two arguments - onChange(event: SyntheticEvent, data: object). You don't need to pass them explicitly while calling the function.

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

answered May 24, 2018 at 9:16

Chetan Gawai

2,4011 gold badge27 silver badges36 bronze badges

Comments

Trung Hoang · Accepted Answer · 2019-08-16 10:36:46Z

0

data/value should have selected option text like in semantic UI

function getSelectedTextValue() {
  alert( $('.ui.dropdown').dropdown('get text') + " : " + $('.ui.dropdown').dropdown('get value') );
}

answered Aug 16, 2019 at 10:36

Trung Hoang

133 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related