I am implementing Picker in react-native. The Picker values are String. I need to show only a part of that String in selected value and I need to split that string and get data out of it dynamically.

<Picker selectedValue={() => this.state.item.unit[this.state.uIndex].split(/\d+(cals)/)[0]} 

                       onValueChange={(itemValue, itemIndex) => this.setState({uIndex: itemIndex})}
                       this.state.item.unit.map((sizee) => {
                           return( <Picker.Item label={sizee} value={sizee} /> );

The above code changes the state of uIndex and works fine if I write selectedValue in the following way:


How do I show splitted value ?

1 Answers

Rodrigo On

You need to split it before sending it to the picker:

//create a new array with the splitted values to replace the original one

var arrayWithSplittedStrings=[];
    let eachItemSplitted = item.split(/\d+(cals)/)[0]
    arrayWithSplittedStrings.push(eachItemSplitted )
//then replace your state with the splitted values

then it should work the way you want