React native material dropdown pass api data

Question

React native material drop-down passing API data I have array of data-list userTypes. I am trying to render userTypes array data userName in drop-down.

constructor(){
    super()
    this.state ={
      bookingLists:[],


      userTypes: [{userType: 'admin', userName: 'Admin User'}, {userType: 'employee', userName: 'Employee User'}, {userType: 'dev', userName: 'Developer User'}]
    }
  }

I just wanted to know how to render userName in dropdown data field

<View style={{ width: 200, marginTop: -15, justifyContent: 'flex-start',}}>
  <Dropdown
    label=''
    value="Pure Austin Fitness"
    data={this.state.userTypes.userName}
    baseColor="#fff"
    textColor="#fff"
    itemColor="#000"
    selectedItemColor="#000"
    fontSize={18}
    dropdownPosition={0}
  />
</View>

Answer 1

I think the data props in dropdown expects a js array as it's value. You have given a undefined object as it's value. ie data={this.state.userTypes.userName} . You should probably do data={this.state.userTypes} . Also I think the library requires the data to be in format { value: 'admin', label: 'Admin user' },

Answer 2

var tempMarker = [];

 for (var p in userTypes) {

      tempMarker.push({
        value: userTypes[p].userName
      });
    }

this.setState({sampleState: tempMarker });

please take sampleState as a state in constructor and load the data in DropDown.

 <View style={{ width: 200, marginTop: -15, justifyContent: 'flex-start',}}>
 <Dropdown
  label=''
  value="Pure Austin Fitness"
  data={this.state.userTypes.sampleState}
  baseColor="#fff"
  textColor="#fff"
  itemColor="#000"
  selectedItemColor="#000"
  fontSize={18}
  dropdownPosition={0}
 />
 </View>

Hope this will be helpful.