Dropdown not working inside Array.map()

Exact same component is working outside the loop but not working inside the Array.map function, as required to loop through a list of drop-down array.

• components: Dropdown
• reactstrap version #5.0.0-beta
• import method es
• react version #16.2.0
• bootstrap version #4.0.0

What is happening?

I have a array of data that generates a new dropdown via looping but the dropdown is not working inside the loop but if I cut paste the code snippet outside the loop the dropdown stops working. It Displays the button but nothing happens when clicked.

What should be happening?

It should display the other options in the dropdown list.

Error message in console

No Error in Console. 

[TheSharpieOne]

UncontrolledDropdown works the same way as Dropdown you just don’t provide the isOpen and toggle props. If you need either one of those (to gain more control), you’ll have to use Dropdown directly. Dropdowns don’t really “change”, they are not like <select>, they don’t have a value. They are primarily for displaying lists of links and such as noted by bootstrap:

Dropdowns are toggleable, contextual overlays for displaying lists of links and more

Because of that, there is no nice way to determine which item was selected. (the same goes for bootstrap.js itself) If you need to determine which item was selected to take action, you can add individual event listeners on the items to determine which one is being clicked. Or Dropdown’s toggle callback should be passed the event which triggered it, which you can use to determine which item was selected (if any) to trigger the toggle (it’s more advanced)

[Samrat-Saha-Sammy]

@TheSharpieOne Thanks for the Prompt response. I think Dropdown should have a onChange callback with the id of the selected option. It a more realistic scenarios to implement a dropdown.

It The addon callback will really help a lot other writing a lot of code in developer side.