CODEWITHSUNDEEP
reactjsreact-native
fosho
fosho

Reputation: 137

How to pass props to React Picker

I have a picker from react-native-picker-select. I also have button where if I press it, I want to pass props to the picker and have it displayed as the label.

I've tried setting a callback function from the button, passing the props to the picker with the label being set as the props. I can see the props being passed but the picker is not updating.

Score.js

<View style={styles.button}>
  <TouchableOpacity
         style={styles.scoreButton}
         onPress={() => this.props.pressMe()}>
         <Text style={{ color: 'white' }}>Press</Text>
  </TouchableOpacity>
</View>

Main.js

pressMe = () => {
    if (this.state.level== 1) {
      this.setState({ scoreInput: 100 });
    }
  };

<Deadlift
   scoreInput={this.state.scoreInput}/>

<View style={styles.scoreContainer}>
   <Score
      pressMe={this.pressMe} />
</View>

Deadlift.js

 var picker = (<Picker
          {...this.props}
          style={pickerSelectStyles}
          placeholder={{
            label: 'Weight',
            value: null,
          }}
          items={this.state.items}
          onValueChange={value => {
            onDLHandler(value, this.getScore(value));
          }}
          value={this.props.scoreInput} <- outside of picker shows this is 
                          logged as 100 but value is not being updated on picker
        />)

<View>{picker}</View>

Upvotes: 0

Views: 497

Answers (2)

Mehran Khan
Mehran Khan

Reputation: 3636

According to documentation of "value" props

Will attempt to locate a matching item from the items array by checking each item's value property. If found, it will update the component to show that item as selected. If the value is not found, it will default to the first item.

The picker does not find the object "{ scoreInput: 100 }" in items array so picker does not update . You have to add in items array also if you want to update the picker

Upvotes: 1

Max
Max

Reputation: 4739

As the doc states, items should be an array of objects with label and value keys, not just an array of values

https://github.com/lawnstarter/react-native-picker-select/blob/master/README.md#props

Upvotes: 0

Related Questions