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>

Answer 1

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.