How to populate arraye value in drop down and on selection if one data populate in ui in react native

Question

In my code one array contactMedium is coming in response. That I have to display in drop down and in drop down I have to display "name" and on selection of name all value should populate in respective fields, like "name" in "AddTitle", "addressLine1" in "Address1 like that. How can I achieve that?

contactMedium is an array which will have multiple objects

 contactMedium: Array(1)
    0:
    id: "Add42"
    medium{
    addressLine1: "Address1 value"
    addressLine2: ""
    addressLine3: ""
    city: "Accra"
    country: "GH"
    landmark: ""
    postcode: "111111"
    stateOrProvince: "GHP1"
    type: "POBox"
    }
    name: "Tite1"
    role: "BranchAddress"
    type: "Address"

Below are the UI of my react native where I have to populate the data

<View style={{ padding: 15 }}>
<View style={{ marginTop: 15 }}>
    <View style={{
        flexDirection: 'row', backgroundColor: '#fff'
    }}>
        <RegularText text={`Address Title`} style={{ fontSize: hp('1.5%'), color: 'grey' }} />
    </View>
    <Item style={{ borderColor: '#00fff', borderBottomWidth: 0.6 }}>
        <Input
            value={AddTitle}
            placeholder={'Enter Address Title'}
            keyboardType='default'
            onSubmitEditing={(e) => this.onChange(AddTitle, 'AddTitle', 'submit')}
            onChangeText={(text) => { this.onChange(text, 'AddTitle', 'change') }}
        />
    </Item>
    {validation.name === 'AddTitle' && validation.value &&
        <Text style={{ color: 'red' }}>{validation.message}</Text>
    }
</View>
<View style={{ marginTop: 15 }}>
    <View style={{
        flexDirection: 'row', backgroundColor: '#fff'
    }}>
        <RegularText text={`Address Line 1`} style={{ fontSize: hp('1.5%'), color: 'grey' }} />
    </View>
    <Item style={{ borderColor: '#00fff', borderBottomWidth: 0.6 }}>
        <Input
            value={Address1}
            placeholder={'Enter Address Line 1'}
            keyboardType='default'
            onSubmitEditing={(text) => this.onChange(Address1, 'Address1', 'submit')}
            onChangeText={(text) => { this.onChange(text, 'Address1', 'change') }}
        />
    </Item>
    {validation.name === 'Address1' && validation.value &&
        <Text style={{ color: 'red' }}>{validation.message}</Text>
    }
</View>

<View style={{ marginTop: 15 }}>
    <SelectField
        label="Country"
        options={Country}
        value={SelectedCountry}
        node="Gender"
        onChange={(key, value) => this.onPickerChange(value, 'Country')}
        that={this}
        setIcon={true}
        textColor='#4A494A'
    />
</View>
<View style={{ width: '100%', height: '.2%', backgroundColor: 'black' }}></View>
<View style={{ marginTop: 15 }}>
    <SelectField
        label="Region"
        options={Region}
        value={SelectedRegion}
        node="Gender"
        onChange={(key, value) => this.onPickerChange(value, 'Region')}
        that={this}
        setIcon={true}
        textColor='#4A494A'
    />
</View>

score 1 · Answer 1 · answered Aug 26 '21 at 10:58

1

Consider you have a method onSelectName which gets fired when clicked on the name in your dropdown, then your flow will be like below

 onSelectName = (selectedName) => {
  // find the selected name from the list of name 

  const selectedMedium = contactMedium.find((medium) => medium.name === selectedName); 

  // now extract the fields you require from the selectedMedium

  const { medium: { addressLine1 = '', addressLine2 = ''  } }  = selectedMedium;

  // now update the state with this extracted values 

  this.setState({
    addressLine1,
    addressLine2
  })

}

answered Aug 26 '21 at 10:58

Shyam

5,292
1
10
20

Thanks for your suggestion , but dropdown takes value and label , how would I get value in drop down first , I mean first I have to get "name" in value which I'll select that is not coming . – Abhigyan Gaurav Aug 26 '21 at 11:01
okay i see many code in your question , can we have the one that is needed and remove the others ? . So you mean to say that you are not getting the selected value from your `Select` component ? – Shyam Aug 26 '21 at 11:03
I mean first I have to display value in drop down for that I have to make like {label:'Tite1', value:'Tite1'} then value will come in drop down , then on selection of that data populate , got confuesd how to do that – Abhigyan Gaurav Aug 26 '21 at 11:10
const options = contactMedium.map(({ name }) => ({ label: name, value: name })); – Shyam Aug 26 '21 at 11:13
ok so I'll get value for drop down and on selection that I'll filter the contactMedium array and set the state .. Thanks let me try . Thanks – Abhigyan Gaurav Aug 26 '21 at 11:17

How to populate arraye value in drop down and on selection if one data populate in ui in react native

1 Answers1