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>
                               

Answer 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
  })

}