setting selectedOption for options as an object

[hosusan6]

Using segmented controls for options as value pairs i cant get the selected option to highlight the selected field.

My on selection if firing and it is returning the value in the text below but the selected field remains unstyled any advice?

I tried setting the selected field to both the value and the label and indeed the object itself.

Also i have bound all the functions in the contructor to "this"

 setSelectedOption(option){
    console.log(option.label)
   this.setState({selectedOption: option})

    }

  renderOption(option, selected, onSelect, index){
    const style = selected ? { fontWeight: 'bold'} : {};

    return (
      <TouchableWithoutFeedback onPress={onSelect} key={index}>
        <Text style={style}>{option}</Text>
      </TouchableWithoutFeedback>
    );
  }

  renderContainer(optionNodes){
    return <View>{optionNodes}</View>;
  }  

 const options = [
  {
    label: 'Walking',
    value: 'walking'
  },
  {
    label: 'Driving',
    value: 'driving'
  },
]

     return (
 <SegmentedControls
          options={ options }
          onSelection={ (option) => this.setSelectedOption(option) }
          extractText={ (option) => option.label }
          selectedOption={this.state.selectedOption}

        />)

<Text>{this.state.selectedOption.value}</Text>

[SpaceK33z]

I had the same issue as you. In the source code I found this undocumented prop, testOptionEqual. It seems to check for strict equality by default. This wouldn't work in my use case, so I changed it to something like this:

<SegmentedControls
  options={[{ label: 'mylabel', value: 'myvalue' }]}
  selectedOption="myvalue"
  testOptionEqual={(selectedValue, option) => selectedValue === option.value}
/>

And now I can just pass values of the options in selectedOption :).

[jawinn]

Thanks @SpaceK33z, that did the trick. The docs should be updated to include that necessary prop when using:

options = [
  {
    label: 'Option 1',
    value: 'opt1'
  },
  {
    label: 'Option 2',
    value: 'opt2'
  }
]

Without the testOptionEqual above, the selectedOption is false when the radio is first selected, and only becomes true when it's pressed a second time.

[ArnaudRinquin]

The docs should be updated to include that necessary prop when using:

PR welcome ;)

[kdenz]

Thanks @SpaceK33z , this is frustrating lol, as separation of label and value is highly valuable, and yet testOptionEqual just isn't included in the examples doc.

[andreecosta]

@hosusan6 @SpaceK33z are you able to change the option after using testOptionEqual={(selectedValue, option) => selectedValue === option.value}?

After using that, the UI won't update when changing option.