Skip to content
Advertisement

Problem in React DropDown list value selection

Iam struggling with a dropdown menu list for my react app.

The problem is, I have a API for which one of the key(key3) has comma(,) seperated values which I want to display in my dropdown list. API response looks like this

JavaScript

I have created a reducer for this API response and tried to use .map() function for key3 roughly like this: {this.props.activeRole.key3.map((r)=> <option>{r}</option>)}

but React throws an errors as Cannot read property 'map' of undefined. Where as using the props with .split() works totally fine. Then it makes the redundancy.

JavaScript

Lets say .split() would work as well, so I created a action creator when the option is selected.

JavaScript

But while calling this action reducer there is no change in selected role. How to save the value when the dropdown value changes?

JavaScript

Please help… considering any .map() or .split() scenario, I would take any suggestions.

Advertisement

Answer

In your code the key3 is not a list, its looks like a string so you need to split it before mapping. And in your onChange event, you haven’t passed event(i.e ‘e’) in your callback function.

JavaScript
User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement