renderButtonText renders '[object Object]' if there is a call to setState in onSelect or renderButtonText functions

[Culzean]

I have version 0.6.1 and am using a slightly more complex data structure.

         <ModalDropdown
              dropdownStyle={styles.pickerItemStyle}
              style={styles.dropDwon}
              textStyle = {styles.DropDownText}
              dropdownTextStyle = {styles.DropDownPickerText}
              renderButtonText = { (rowData) => {
                this.setState({selectedService: rowData.ssid});
                return rowData.ssid;
                } }
              defaultValue = {"Please select wifi"}
              options = {this.state.services}
              renderRow = {this._renderDropdownRow.bind(this)}
              onSelect = {this.pickerOnSelect.bind(this)}
            >
         </ModalDropdown>

If there is a call to setState for both of these functions then the dropdown text renders as [object Object]. If I remove the call then the dropdown renders the ssid strings as expected.

[Culzean]

it seems any call to setState is breaking the renderButtonText. [object Object] looks very broken.

[brascene]

@Culzean the same here, if I use setState it goes in some endless loop and I receive maximum call stack size exceeded error.

[mtimofiiv]

Having the same issue as well, and I am not using any this.setState in it either. Here's a snippet:

<ModalDropdown
  ref={self => { this.accountPicker = self }}
  defaultValue={i18n.t('ui.inputs.account_picker.placeholder')}
  options={accounts.data}
  onSelect={({ address }) => this.updateTxField({ from: address })}
  renderRow={({ title }) => <Text>{title}</Text>}
  renderButtonText={({ title }) => title}
  style={style.dropdownContainer}
  textStyle={style.dropdownText}
  dropdownStyle={style.dropdownStyle}
/>

In my example, accounts.data is an array of objects with obviously 2 props, title and address.

The results are as follows (image 1 is during selection, 2 is after the option is clicked):

I tried reverting back to version 0.5.0 to see what would happen and in that, [Object object] shows up all the time, not just after selection.

[mtimofiiv]

I tracked it down. The error occurs in componentWillReceiveProps:

  componentWillReceiveProps(nextProps) {
    let {buttonText, selectedIndex} = this.state;
    const {defaultIndex, defaultValue, options} = nextProps;

    buttonText = this._nextValue == null ? buttonText : this._nextValue.toString(); //<<< here
    selectedIndex = this._nextIndex == null ? selectedIndex : this._nextIndex;
    if (selectedIndex < 0) {
      selectedIndex = defaultIndex;
      if (selectedIndex < 0) {
        buttonText = defaultValue;
      }
    }
    this._nextValue = null;
    this._nextIndex = null;

    this.setState({
      loading: !options,
      buttonText,
      selectedIndex
    });
  }

[mtimofiiv]

I submitted a PR -> #142

Feel free to use mtimofiiv/react-native-modal-dropdown while this is awaiting review. It fixes the issue for me.

[sohobloo]

Fixed in v0.6.2 #146

[Culzean]

Just testing out the update now. Issue resolved. Thanks!