ReactStrap: Accessing the id of the selected dropDownItem

Question

I have this dropdownList:

  <Dropdown
                  isOpen={this.state.dropdownOpen[3]}
                  toggle={() => {
                    this.toggle(3);
                  }}
                >
                  <DropdownToggle className="my-dropdown" caret>
                    {" "}
                    {this.state.dropDownValue}
                  </DropdownToggle>
                  <DropdownMenu>
                    <DropdownItem productid="0">
                      {" "}
                      <div onClick={this.changeValue}>
                        PURE BLACK MAT BLUETOOTH
                      </div>
                    </DropdownItem>
                    <DropdownItem productid="1">
                      {" "}
                      <div onClick={this.changeValue}>
                        PLAYER BLACK MAT FILAIRE
                      </div>
                    </DropdownItem>
                    <DropdownItem productid="2">
                      {" "}
                      <div onClick={this.changeValue}>
                        PURE PLUS BLACK MAT MEMORY 128 G
                      </div>
                    </DropdownItem>
                    <DropdownItem productid="3">
                      {" "}
                      <div onClick={this.changeValue}>
                        PURE LIMITED CHROME GOLD MEMORY 256G
                      </div>
                    </DropdownItem>
                    <DropdownItem productid="4">
                      {" "}
                      <div onClick={this.changeValue}>
                        PURE GOLD MAT BLUETOOTH
                      </div>
                    </DropdownItem>
                    <DropdownItem productid="5">
                      {" "}
                      <div onClick={this.changeValue}>
                        PLAYER GOLD MAT FILAIRE
                      </div>
                    </DropdownItem>
                    <DropdownItem productid="6">
                      {" "}
                      <div onClick={this.changeValue}>
                        PURE PLUS GOLD MAT MEMORY 128 G
                      </div>
                    </DropdownItem>
                    <DropdownItem productid="7">
                      {" "}
                      <div onClick={this.changeValue}>GAME ONE WHITE</div>
                    </DropdownItem>
                  </DropdownMenu>
                </Dropdown>

And this onClickListener:

 changeValue(e) {
    console.log(
      "The selected productId is: ",
      e.currentTarget.getAttribute("productid")
    );
    //The selected productId is:  null
    this.setState({
      dropDownValue: e.currentTarget.textContent
    });
  }

I am trying to access the productid of the selected DropdownItem. But, for some reason the result is always null:

console.log( "The selected productId is: ", e.currentTarget.getAttribute("productid") ); //The selected productId is: null

Any idea what I've done wrong?

Why dont you pass productId as param to changeValue handler ? — Amir-Mousavi, Feb 27 '20 at 14:06
@Amir-Mousavi this is the method I've found on SO and it should work. I will try your suggestion though. Thanks. — AG_HIHI, Feb 27 '20 at 14:08
@Amir-Mousavi check-out the answers here: https://stackoverflow.com/questions/44364502/how-to-set-selected-item-in-reactstrap-dropdown — AG_HIHI, Feb 27 '20 at 14:11
the `DropdownItem` is a react component the `productid` roles as a prop for that reactStrap component, not an HTML attribute, and you cannot access it by `e.currentTarget.getAttribute` — Amir-Mousavi, Feb 27 '20 at 14:13
The example you have posted gets the attribute of `textContent` from a HTML div element not a React component — Amir-Mousavi, Feb 27 '20 at 14:13
I have just one question. If I pass the productid as a param to changeValue handler, won't this cause problem with : e.currentTarget.textContent — AG_HIHI, Feb 27 '20 at 14:17
@Amir-Mousavi I have fixed this by passing the attribute productid inside the div — AG_HIHI, Feb 27 '20 at 14:35

score 0 · Answer 1 · answered Feb 27 '20 at 14:35

I have fixed this by passing the attribute productid inside the div:

 <DropdownItem>
                      {" "}
                      <div productid="0" onClick={this.changeValue}>
                        PURE BLACK MAT BLUETOOTH
                      </div>
                    </DropdownItem>

ReactStrap: Accessing the id of the selected dropDownItem

1 Answers1

Linked