Displaying two Array items in Picker View

Question

I am new to react and i want display array item into pickerview for selection

NOTE: Consider i can not modify structure of both the API_URL and env const

only way i can access the value is API_URL[env.url1]

My entire code is as below:

import React, { Component } from 'react';
import { Picker, SafeAreaView, Text } from 'react-native';


export default class App extends Component {
  state = {
    hand: 'right', 
  }

  render() {
 const API_URL: any = {
    url1: 'http://xyz',
    url2: 'http://abc',
    url3: 'http://pqr',
    };
    const env: any = {
    url1: 'url1',
    url2: 'url2',
    url3: 'url3'
};

    return (
      <SafeAreaView style={{flex:1}}>
        <Text style={{ color:'black', fontWeight:'900', fontSize: 18, padding:30}}> Scegli tipo </Text>
         <Text style={{ color:'black', fontWeight:'900', fontSize: 18, padding:30}}> {API_URL[env.url1]} </Text>
        <Picker
          selectedValue={this.state.hand}
          onValueChange={hand => this.setState({ hand })}
          style={{ width: 160, postion: 'absolute',fontSize:10 }}
          mode="dropdown"
          itemStyle={{ color:'red', fontWeight:'900', fontSize: 18, padding:30}}>
          <Picker.Item label="Right Hand" value="right" />
          <Picker.Item label="Left Hand" value="left" />
// i want show that array  here like.    <Picker.Item label="url1" value="http://xyz" /> 


        </Picker>
      </SafeAreaView>
    );
  }
}

Answer 1

I dont see any array in your question, but you might mean your API_URL and env dictionary.

And to display every key/value pair from these dictionarys as a Picker.Item you need something like this:

<Picker
    selectedValue={this.state.hand}
    onValueChange={hand => this.setState({ hand })}
    style={{ width: 160, postion: 'absolute',fontSize:10 }}
    mode="dropdown"
    itemStyle={{ color:'red', fontWeight:'900', fontSize: 18, padding:30}}>
    <Picker.Item label="Right Hand" value="right" />
    <Picker.Item label="Left Hand" value="left" />
    {
        Object.keys(env).map(envParameter =>
            <Picker.Item key={envParameter} label={envParameter} value={API_URL[envParameter]} /> 
        )
    }
</Picker>

This loops over every key in your env dictionary and creates an Picker.Item for every key with the value coming from API_URL