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)

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)

• javascript
• reactjs
• semantic-ui

• You can use the native onChange which Semantic offers: react.semantic-ui./modules/dropdown look at what it does return – Naramsim Commented Feb 15, 2018 at 14:14
• 1 Here an example>=: react.semantic-ui./modules/… – Naramsim Commented Feb 15, 2018 at 14:16
• To add to what @Naramsim said, you should be using the onChange function in the Select ponent 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 Commented Feb 15, 2018 at 15:00

1 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.