CODEWITHSUNDEEP
javascriptandroidreactjsreact-nativeredux
Mr. B.
Mr. B.

Reputation: 8707

react-native: <Picker> loses selectedValue when changing the <Picker.Item> label

I'd like to change the labels of the <Picker.Item>s of my <Picker>, e.g. when the language changes, triggered by another button (react-redux).

key and value should stay the same, just the label changes.

Unfortunately the result is a re-rendering(?) and the selectedValue changes to the first <Picker.Item>s (not to the default!).

<Picker 
    selectedValue={this.props.myValue}
    onValueChange={(newValue) => this.props.setMyValue(newValue);}}>

    {this.props.myOptions.map((s, i) => {
        let l = modify(s);
        return <Picker.Item key={i} value={s} label={l}/>      
    })}
</Picker>

The problem occurs as soon as the label changes, e.g. by adding the current date on every change:

export default function modify(string) {
    // return string; // works
    return string + '_i_change_' + new Date(); // doesn't work
}

I appreciate every advice. Thanks in advance!

Upvotes: 2

Views: 2358

Answers (1)

marc-dworkin
marc-dworkin

Reputation: 336

ran into same issue. You may need to make the selectedValue a string. eg:

selectedValue={this.props.myValue.toString()}

Upvotes: 5

Related Questions