[Object Object] in Dropdown after selecting

[BowgartField]

trafficstars

Hello,

When I selected the options that i want, In the dropdown the options selected is shown like this "[Object Object]". NB: my options datat are array [{"title": true, "name": value},{"title": false, "name": value}] That's my code

Thanks

[BowgartField]

UP !!!

[adikp]

somebody pls help!

[im4eversmrt]

Hello i have the same error, please help

[sagomezza]

I have the same error. UP!

[sohobloo]

Hi, everybody! Finally, I have decided to solve this often-appear-issue. v0.6.0 introduces a new prop renderButtonText(data: object) :string for you to extract and return the selected option text for the button to display if you choose to use array of objects as options.

here is the example where you can also find in the example codes of this project:

data:

const DEMO_OPTIONS_2 = [
  {"name": "Rex", "age": 30},
  {"name": "Mary", "age": 25},
  {"name": "John", "age": 41},
  {"name": "Jim", "age": 22},
  {"name": "Susan", "age": 52},
  {"name": "Brent", "age": 33},
  {"name": "Alex", "age": 16},
  {"name": "Ian", "age": 20},
  {"name": "Phil", "age": 24},
];

jsx:

<ModalDropdown style={styles.dropdown_2}
                           textStyle={styles.dropdown_2_text}
                           dropdownStyle={styles.dropdown_2_dropdown}
                           options={DEMO_OPTIONS_2}
                           renderButtonText={(rowData) => this._dropdown_2_renderButtonText(rowData)}
                           renderRow={this._dropdown_2_renderRow.bind(this)}
                           renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this._dropdown_2_renderSeparator(sectionID, rowID, adjacentRowHighlighted)}
            />

renderButtonText

  _dropdown_2_renderButtonText(rowData) {
    const { name, age } = rowData;
    return `${name} - ${age}`;
  }

[sagomezza]

Hi sohobloo, I updated the library but your solution didn't work for me. Here's my code:

import React, {Component} from 'react';
import {
  View,
  Dimensions,
  Text,
  StyleSheet,
} from 'react-native';
import {
  countries,
  callingCountries,
} from 'country-data';
import ModalDropdown from 'react-native-modal-dropdown';

const { width, height } = Dimensions.get('screen');

class DropDown extends Component {

 constructor(props){
    super(props);
    this.state = {
      countryCode:'',
      countryFlag:'',
      listOfCountries: [
        {
          "code" : callingCountries.CO.countryCallingCodes,
          "flag": countries.CO.emoji
        },
        {
          "code" : callingCountries.CL.countryCallingCodes,
          "flag": countries.CL.emoji
        },
        {
          "code" : callingCountries.PA.countryCallingCodes,
          "flag": countries.PA.emoji
        },
        {
          "code" : callingCountries.PE.countryCallingCodes,
          "flag": countries.PE.emoji
        },
      ],
    }
  }

 _renderCountryCodeRow(rowData) {
    const light = fontLoaded ? 'OswaldLight' : null;
    const { fontLoaded } = this.state;
    const { code, flag } = rowData;
    return(
     <View style={styles.listSection}>
       <Text style={styles.flag}>{`${flag}`} </Text>
       <Text style={[styles.textBar, {textAlign:'center'}]}> {`${code}`}</Text>
     </View>
    );
  }

  _renderButtonText(rowData){
    const { code, flag } = rowData;
    console.log(`${flag} - ${code}`);
    return `${flag} ${code}`;
  }

  render() {
    const { countryCode, countryFlag, listOfCountries,  } = this.state;
    return(
      <View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
      <ModalDropdown
                    options={listOfCountries}
                    defaultValue={'Seleccionar pais'}
                    style={styles.dropDown}
                    textStyle={[styles.textBar, {textAlign:'center'}]}
                    renderRow={this._renderCountryCodeRow.bind(this)}
                    renderButtonText={(rowData)=>this._renderButtonText(rowData)}
                    onSelect={(idx, value)=> this.setState({countryCode:value.code, countryFlag:value.flag})}
                  />
      </View>
    );
  }
}

const styles = StyleSheet.create({
   dropDown: {
    justifyContent:'center',
    alignItems:'center',
    width: width * 0.21,
    height :height*0.07
  },
  textBar:{
    color:'rgb(138,158,162)',
    fontSize:13
  },
  flag: {
    height:30,
    width: 30,
    fontSize:25,
    textAlign:'center',
  },
  listSection: {
    flexDirection:'row',
    width: width * 0.21,
    height :height*0.07,
    justifyContent:'center',
    alignItems:'center'
  },
});

export default DropDown;

[BowgartField]

@sagomezza not working for me too !!!

[BowgartField]

The react Packager Say that the version in package.json IS not the same as in module folder

[adikp]

@BowgartField have you update into 0.6.0 version? I just update into 0.6.0v and update my code same as @sohobloo explain and its working...

big thanks @sohobloo bro

[BowgartField]

@adkip ok it's so what i thinks. I'm not able to upgrade to 0.6.0 version because packager say that packager.json version is not the version in module fonder. EDIT: Ok i reinstall the 0.6.0 version but not working.

[ershubhamgarg]

@sohobloo I updated the version to 0.6.0 and it is not working. The prop is working but the button text is not changing from [object object] to desired text.

[sagomezza]

@ershubhamgarg The same happens to me

[sohobloo]

There indeed is a bug with renderButtonText when using select(idx) api. fixed in v0.6.1

[dekameron22]

Hi, i'm using your library, but got this issue inside dependencies "react-native-modal-dropdown": "^0.6.1",

and code:

const DEMO_OPTIONS = [
  {name: 'Personal'},
  {name: 'Company 1'},
  {name: 'Company 2'},
]

<LinearGradient
          start={{ x: 0.0, y: 0.0 }}
          end={{ x: 1.0, y: 0.0 }}
          colors={['#22FD99', '#46D7F5']}
          zIndex={1}
          style={this.gradientStyle()}
        >
          <ModalDropdown ref="dropdown"
                             style={styles.dropdown}
                             textStyle={styles.dropdownTextStyle}
                             dropdownStyle={styles.dropdownStyle}
                             options={DEMO_OPTIONS}
                             defaultValue={'Personal'}
                             renderButtonText={(rowData) => this.renderButtonText(rowData)}
                             renderRow={this.dropdownRenderRow.bind(this)}
                             renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this.dropdownRenderSeparator(sectionID, rowID, adjacentRowHighlighted)}
                             onDropdownWillShow={this.onDropdownWillShow}
                             onDropdownWillHide={this.onDropdownWillHide}
                          />
        </LinearGradient>


//delegate methods

  renderButtonText(rowData) {
    console.log('rowdata', rowData);
    return `${rowData.name}`;
  }

  dropdownRenderRow(rowData, rowID, highlighted) {
   return (
       <View style={styles.dropdownRowStyle}>
         <Text style={styles.dropdownRowTextStyle}>
           {`${rowData.name}`}
         </Text>
       </View>
   );
 }

 dropdownRenderSeparator(sectionID, rowID, adjacentRowHighlighted) {
    if (rowID == DEMO_OPTIONS.length - 1) return;
    let key = `spr_${rowID}`;
    return (<View style={styles.dropdownSeparatorStyle}
                  key={key}
    />);
  }

  onDropdownWillShow() {
    this.setState({ gradientHeight: 150 })
  }

  onDropdownWillHide() {
    this.setState({ gradientHeight: 44 })
  }

  gradientStyle() {
    const { gradientHeight } = this.state
    console.log('on gradientStyle change', gradientHeight);
    return {
      alignSelf: 'center',
      width: size.width/1.75,
      height: gradientHeight,
      borderRadius: 5,
      // backgroundColor: 'red',
      backgroundColor: 'transparent',
      position: 'absolute'
    }
  }

[mtimofiiv]

I think I may have solved this in a duplicate of this: https://github.com/sohobloo/react-native-modal-dropdown/issues/139

Please let me know if the PR fixes it for you!

[sohobloo]

@dekameron22 sorry for that. try v0.6.2.