setting DropDown values from array of objects

Question

This is the data fetched from WebAPI and stored in a state called items

this.setState({
    items: dataSource
  staffId: ''
})

This state of items will be this.

[
    {"departmentName":"KYAUKSE MAINTENANCE","employeeName":"AUNG THU1", "staffId" : "00001"},
    {"departmentName":"KYAUKSE MAINTENANCE","employeeName":"AUNG THU2", "staffId" : "00002"},
    {"departmentName":"KYAUKSE MAINTENANCE","employeeName":"AUNG THU3", "staffId" : "00003"}
]

I would like to create a dropdown in react native with just the emplyeeName

let staff = [{
      value: 'AUNG THU1',
    }, {
      value: 'AUNG THU2',
    }, {
      value: 'AUNG THU3',
    }];

<Dropdown
    label='Staff Name'
    baseColor='#0079b5'
    data={staff}
    onChangeText={(value) => this.onChangeName(value)}
/>

Edit: Thank you for the answers! I would like to know whether it is possible to get the staffId of the selected value in DropDown? So if i were to select AUNG THU 1, the onChange method would trigger and I would like to set the state of staffId to it.

SDushan · Accepted Answer · 2020-01-21 19:12:03Z

1

If you want to change your array, try below approach

let dataSource = [
  { departmentName: "KYAUKSE MAINTENANCE", employeeName: "AUNG THU1" },
  { departmentName: "KYAUKSE MAINTENANCE", employeeName: "AUNG THU2" },
  { departmentName: "KYAUKSE MAINTENANCE", employeeName: "AUNG THU3" }
];

let staff = dataSource.map(item => ({
  value: item.employeeName,
  staffId: item.staffId
}));

console.log(staff);

Hope this helps you. Feel free for doubts.

edited Jan 21, 2020 at 19:12

answered Jan 21, 2020 at 18:10

SDushan

4,6512 gold badges20 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Min UD Over a year ago

Hi! Thank you for the answer,but is there a way I can get the id of the chosen employee? For example, if I were to choose AUNG THU1 in the dropdown, I would like to get the value of his staffId.

SDushan Over a year ago

@MinUD check your Dropdown there should be props to get the selected value.

Min UD Over a year ago

It says selectedValue is "Value matching value of one of the items". so i pass selectedValue={value}, whereas my onChangeText={(staffId) => this.onChangeName(staffId)}. Will I be able to get the staffId this way?

SDushan Over a year ago

@MinUD what is the library which you used for Dropdown?

Min UD Over a year ago

It is react-native-material-dropdown

Tom Shaw · Accepted Answer · 2020-01-21 18:10:13Z

0

Double check your Dropdown component. It may be expecting a data array that has both keys and values.

let staff = [{
  key: 'AUNG THU1',
  value: 'AUNG THU1'
}, {
  key: 'AUNG THU2',
  value: 'AUNG THU2'
}, {
  key: 'AUNG THU3',
  value: 'AUNG THU3'
}];

answered Jan 21, 2020 at 18:10

Tom Shaw

1,7322 gold badges16 silver badges25 bronze badges

Collectives™ on Stack Overflow

setting DropDown values from array of objects

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related