Skip to content

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

    "key1": "user",
    "key2": "user",
    "key3": "abc,def,ghi"

I have created a reducer for this API response and tried to use .map() function for key3 roughly like this: {> <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.


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

const selectedRoleAction = (role) => {
    return {
        type: "ROLE_SELECTED",
        payload: role,
export default selectedRoleAction;

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

<select className="form-control" onChange={() => this.props.selectedRoleAction((e)=>}>

<option value={this.props.activeRole.role.split(",")[0]>

<option value={this.props.activeRole.role.split(",")[1]>{this.props.activeRole.role.split(",")[1]}</option>

<option value={this.props.activeRole.role.split(",")[2]>{this.props.activeRole.role.split(",")[2]}</option>

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


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.

<select className="form-control" onChange={(e) => this.props.selectedRoleAction((e)=>}>
    {this.props.activeRole.key3.split(',').map((r)=> <option>{r}</option>)}