I am trying to get the value of the property in my dropdown menu in react

Question

I am trying to console.log the value of the dropdown item that I selected. I have tried e.target.value and data.value. e.target.value returns nothing and data.value returns undefined.

<DropdownItem
    onClick={(e, data) => {
        // this.setState({ choice: this.props.size });

        // value.addChoices(this.state.choice);
        console.log(data.value);
    }}
    className="bg-info"
>
    {this.props.size}
</DropdownItem>

Which library are you using? Cause `DropdownItem` isn't a HTML standard tag. And normally you wouldn't have a `data.value` as part of a click event. — marpme, Jul 13 '19 at 18:48
I’m using reactrtrap should I switch to a normal select menu? — TheGreen Lightbulb, Jul 13 '19 at 18:48
And I found dAta.value on another thread tried it and got undefined . — TheGreen Lightbulb, Jul 13 '19 at 18:49

score 2 · Answer 1 · answered Jul 13 '19 at 19:20

this will give you the text value inside of the DropdownItem button

<DropdownItem
  onClick={e => {
    // this.setState({ choice: this.props.size });

    // value.addChoices(this.state.choice);
    console.log(e.target.innerText);
  }}
  className="bg-info"
>
  {this.props.size}
</DropdownItem>

score 1 · Accepted Answer · answered Jul 13 '19 at 19:39

What you want to do normally is to pass a value prop (that's why e.target.value is undefined, because you did not pass any value).

i.e.:

        <DropdownMenu>
          <DropdownItem value='one' onClick={(e) => console.log(e.target.value)}>Foo Action One</DropdownItem>
        </DropdownMenu>

Full example code (changing the reactstrap sample component):

import React from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

export default class DropdownTest extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      dropdownOpen: false
    };
  }

  toggle() {
    this.setState(prevState => ({
      dropdownOpen: !prevState.dropdownOpen
    }));
  }

  handleClick = (e) => {
    console.log(e.target.value);
  }

  render() {
    return (
      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
        <DropdownToggle caret>
          Dropdown
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem value='one' onClick={this.handleClick}>Foo Action One</DropdownItem>
          <DropdownItem value='two' onClick={this.handleClick}>Bar Action Two</DropdownItem>
          <DropdownItem value='three' onClick={this.handleClick}>Quo Action Three</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    );
  }
}

I am trying to get the value of the property in my dropdown menu in react

2 Answers2