React ES6: Get selected value in dropdown list using semantic UI

Question

Given the following data, how can I get the birds name and push it (Using the add button) to a new array to be displayed in another div (Using react es6)? So basically I want a user to click a bird from the semantic dropdown and display it in a different div for example shown below. This is probably simple but I can't seem to find a way to it when I'm using Semantic elements. Do I need to use onChange?

I need to to do this in a class I am exporting (react) (just havent shown the class/constructor/state definitions)

<div>
    <p>How can i display 'Bird_Name' here?<p>
</div>

addClick = () => {
        
}

const {
  Button,
  Container,
  Divider,
  Dropdown,
  Header,
  Message,
  Segment,
} = semanticUIReact

const birds = [
            {
                "value": "001",
                "Bird_Name": "Eurasian Collared-Dove"
            },
            {
                "value": "002",
                "Bird_Name": "Bald Eagle"
            },
            {
                "value": "003",
                "Bird_Name": "Cooper's Hawk"
            },
        ];

const options = birds.map(({ ID, Bird_Name }) => ({ value: ID, text: Bird_Name }))

const App = () => (
  <Container>
    <Divider hidden />
    <Header as='h1'>Semantic-UI-React</Header>
    <Dropdown 
      placeholder='Select...' 
      selection
      search
      options={options}
      renderLabel={({ Bird_Name }) => 1}
      />
      <button className="ui primary button add" onClick={this.addClick}>Add</button>
  </Container>
)

// ----------------------------------------
// Render to DOM
// ----------------------------------------
const mountNode = document.createElement('div')
document.body.appendChild(mountNode)

ReactDOM.render(<App />, mountNode)

You can use the native onChange which Semantic offers: react.semantic-ui.com/modules/dropdown look at what it does return — Naramsim
– Naramsim, Commented Feb 15, 2018 at 14:14
To add to what @Naramsim said, you should be using the onChange function in the Select component to call update the state (probably local state in this case so use setState). Then when the button is clicked, you can get the state and push it using the add button. — SteveB
– SteveB, Commented Feb 15, 2018 at 15:00

Wyck · Accepted Answer · 2019-08-01 18:38:54Z

18

So, what you basically want is the onChange function which will display.

 <Dropdown 
  placeholder='Select...' 
  selection
  search
  options={options}
  renderLabel={({ Bird_Name }) => 1}
  onChange={this.getBird}
  />

and make a getBird function

getBird = (event, {value}) => {
    console.log(value);
    let bird_name = event.target.textContent;
    console.log(bird_name);
}

The value and text variable in the getBird function are basically the value and bird_name of the selected bird from the dropdown.

edited Aug 1, 2019 at 18:38

Wyck

12.1k8 gold badges50 silver badges93 bronze badges

answered Nov 8, 2018 at 5:16

nishit chittora

1,05414 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

React ES6: Get selected value in dropdown list using semantic UI

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related