How to get value and label name from React Native Picker?

Question

In my react native project, I have a picker that allow user to filter staffs by branch. I got the label name and value from my database. Now I can got branch id from picker value and able to filter staffs by branch with this link http://192.168.10.60:8888/customerfeedback/public/api/staff?pId=.

My problem is that I want to update my state value to show user which branch they have selected instead of display id. How can I get picker label name and update it to my state?

Here is my code:

    <PickerIOS
     style={{ flex: 1 }}
     selectedValue={this.state.pickerSelected}
     onValueChange={(value, index) => this.onPickerValueChange(value, index)}
    >
    {branches.map(branch =>{
      return (
         <PickerIOS.Item key={branch.id} label={branch.name} value={branch.id}/>
    );
    })}
   </PickerIOS>

Now I can get the value and index, but I want to get index from my database instead of array index.

onPickerValueChange = (value, index) => {
    this.setState(
      {
        pickerSelected: value
      },
      () => {

        console.log(value, index);

      }
    );
}

Thank for help.

Bauske

Answer 1

Use the index to get the array element.

onPickerValueChange = (value, index) => {
this.setState(
  {
    pickerSelected: value
  },
  (name, index) => {

    console.log(branches[index]);

  }
 );
}

Leaflet

I want index from database not from array, because it's not the same – Bauske

You may need to implement redux to send an api request and map the redux state to props if that is what you want? – Leaflet

In the project I dont' use redux yet, because it just a small project only. – Bauske

Either you call fetch here directly and set response to state or implement redux to map your state a prop. Only then can you achieve what you need. – Leaflet

If you want to show branch name then you can get it by branches[index].name – Amoebaean

Kranthi Kumar Julakanti, Thanks I got an idea now. – Bauske

@NaveenVignesh - you do not need to implement redux, although it is nice to have for managing state and properties. – Squint

Answer 2

Finally I can fixed the problem now. I know it's not a good solution, but at least it worked as what I want now :)

constructor(props) {
  super(props);
  pickerSelected: '',
  defaultSelected: 'Select branch's name',
}

and here how I did to update my states

onPickerValueChange = (value) => {
    const { branches } = this.state;
    let branchName = branches.find(branch => branch.id === value);
    this.setState(
      {
        pickerSelected: value,
        defaultSelected: branchName.name
      }
    );
}

Hope this can help other people who meet the same problem :)

Bauske

Answer 3

Did you try to do something like that by making the value an object ??

Something that looks like this:

    <PickerIOS
     style={{ flex: 1 }}
     selectedValue={this.state.pickerSelected}
     onValueChange={(value, index) => this.onPickerValueChange(value, index)}
    >
    {branches.map(branch =>{
      return (
         <PickerIOS.Item key={branch.id} label={branch.name} value={id: branch.id, name: branch.name}/>
    );
    })}
   </PickerIOS>

And access it with something like that :

this.setState(
      {
        pickerSelected: value.id,
        defaultSelected: value.name
      }
    );

Misguide