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]} 
                       style={style.pick}


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

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

selectedValue={this.state.item.unit[this.state.uIndex]} 

How do I show splitted value ?

1 Answers

0
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=[];
 this.state.item.unit.map(item=>{
    let eachItemSplitted = item.split(/\d+(cals)/)[0]
    arrayWithSplittedStrings.push(eachItemSplitted )
})
//then replace your state with the splitted values
this.setState({item[unit]:arrayWithSplittedStrings})

then it should work the way you want