How to display Picker.Item label with Dynamic values in array in react native

Question

how can I pick 'label' of 'Picker.Item' from an array. i have my picker code as follows:

<View style={Styles.inputWrapper}>
<Picker
selectedValue={this.state.expiryYear}
style={Styles.expYear}
onValueChange={(itemValue, itemIndex) => this.setState({ expiryYear:
itemValue })}>

<Picker.Item label="select" value="0" />
<Picker.Item label="2018" value="2018" />
<Picker.Item label="2019" value="2019" />
<Picker.Item label="2020" value="2020" />
<Picker.Item label="2021" value="2021" />
.
.
.
<Picker.Item label="2030" value="2030" />
</Picker>
</View>

I have an array 'years[]' with values 2018,2019,...,2030

        var years = [];
        for (y = 2018; y <= 2030; y++) {
          years.push([y]);
        }

In dropdown list I want to show years

Hardik Virani · Accepted Answer · 2019-01-23 06:29:55Z

1

You need to add below code in between your <Picker> CODE </Picker>

    years.map((year) => {
        return (
            <Picker.Item label={year} value={year} />
        )
    })

years is an array and has value whatever you want to render.(i mean how many years)

edited Jan 23, 2019 at 6:29

user10943790

answered Nov 16, 2018 at 6:18

Hardik Virani

1,7557 gold badges24 silver badges36 bronze badges

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

5 Comments

Hardik Virani Over a year ago

you need to define array first like:, var years = [2010, 2011, 2012, 2013, 2014];

Fahad Over a year ago

var years = [2010, 2011, 2012, 2013, 2014]; tried with this again app stopped working. seems that something wrong with array data. @Hardik

Hardik Virani Over a year ago

now try with one single element like var years = [2000];

Fahad Over a year ago

trying with var years = ["2018","2019","2020"]; will works.ie (data without quotes causes error) but not with for loop push

Fahad Over a year ago

i doesnt need hardcorded data. need dynamic data. how it is possible?

Collectives™ on Stack Overflow

How to display Picker.Item label with Dynamic values in array in react native

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related