How can i set the default or displayed value programatically?

[gmramaswamy]

Hello, I have 2 dropdown boxes. Based on selection on 1 i would like to set the default or rather displayed value of the second dropdown. user then can change the displayed value in second using the dropdown if needed. For this i need to be able to set the displayed value in dropdown programmatically? can you please tell me how i can do that?

[gmramaswamy]

looks like i need to use the select(idx) to do this? am i right. if so can you please give a small snippet? sorry i am new to frontend engineering and still figuring things out. thanks for your help.

thanks

[gmramaswamy]

@sohobloo Hey, can you please help.

[sohobloo]

If the displayed value is one of the options of the dropdown, you can call select(idx) of your dropdown reference. If not, you have to give a defaultValue and select(-1) You can have a look at my examples.

[alburdette619]

Currently using this library I am having a case where I'd like to be able to select based on value rather than index. @sohobloo would you be open to a PR that allowed that?

[sohobloo]

@alburdette619 Why not find out the index of this value and call onSelect.

[alburdette619]

@sohobloo You're right, either way would work. I don't think it'd be a bad sugar method to include that'd just call an indexOf() on options using the result to call select.

[dscx]

Hi @sohobloo greta library! I am a bit confused on what I need to do to have the defaultValue update to be the string from an array of objects, when selected. My data is structured similar to your example DEMO_OPTIONS_2 but I can't get it to show anything other than [object Object].

I added a function to render the text of defaultValue so I could see it happen, and I can see it get called an appropriate amount of times, with the correct data being sent back, but the label doesn't change. The state is also updating as expected.

** UPDATE ** -> I refactored and moved it around a bunch. I have this in a modal. Anyway, I get the exact same behavior whether its a component or a wrapper. If I have hot reloading enabled and I modify something (to trigger the hot reload), the field updates to be what I expected! But when I select another item from the list, it goes back to [object Object]

"react": "16.0.0-alpha.6",
"react-native": "0.44.2",
"react-native-modal-dropdown": "^0.4.3",

Can you spot what I am doing wrong?

_defaultValue() {
  console.log('The label Should be: ', this.state.category.label)
  return this.state.category.label
}

  _renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
    if (rowID == 17) return;
    let key = `spr_${rowID}`;
    return (<View key={key}
    />);
  }

  showCategories() {
    const data = this.props.categories;
    return (
      <View style={{ flex: 1, justifyContent: 'space-around' }}>
        <ModalDropdown
          options={data}
          renderRow={this._renderRow.bind(this)}
          defaultValue={this._defaultValue()}
          onSelect={(idx, category) => { this.setState({ category }) }}
          renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this._renderSeparator(sectionID, rowID, adjacentRowHighlighted)}
        />
      </View>
    );
  }

thank you!

[dscx]

@sohobloo here is a video of whats happening.

When the title changes, I am commenting in/out a random tag (2 times) that is just causing the hot reload to happen, but also updates the field (so you would think the config is ok). The gif maybe confusing when it restarts, it never 'resets' to default, that's when it loops.

[sohobloo]

Hi @dscx , Sorry for your confusion.

defaultValue is for the initial state and will be invalid after select an option. It will show back only if you call select(-1) of the component reference. Objects array as options will cause the build in trigger button display [object Object] as the component don't know what field of the object to display. There are two ways:

1. Use string arrays as options. Maintain your structured data outside the component. (recommended)
2. Use the component as a wrapper then you can render the trigger button yourself and update the display value on select.

Both do not need you to update the defaultValue. Just give a initial value like 'Select Category' in your case. 😆

[dscx]

@sohobloo haha whoops! Rendering the button makes the most sense - I will revisit your sample since I saw that working there. Thank you so much!

[sukumardv3101]

Hi sohobloo,

Am facing same issue as mr.dscx facing. Can you please provide some code in order to get desired value.

thank you,

[sohobloo]

@sukumardv3101 https://github.com/sohobloo/react-native-modal-dropdown/issues/55#issuecomment-313564959

[Krupatank]

Open ModalDropdown.js File :

_onRowPress(rowData, sectionID, rowID, highlightRow)

  this.setState({
    buttonText: rowData.toString(),
    selectedIndex: rowID
  });

Set buttonText: rowData.name.toString(),

then run this project

[hdrabs]

Hi @Krupatank I am facing the same issue and I am using your code in onSelect function binded to the ModalDropdown. I am getting proper values, but the buttonText is not being set. You think there is anything else I might be doing wrong? P.S. I am a newbie so this might be a stupid question.

[priyanga2496]

hi, Somenone help me to do expandable list in modalddropdown view

[priyanga2496]

Also i am not able to add dynamic values, the code is below <ModalDropdown data={this.state.parkdetails} renderRow={(item)} options={DEMO_OPTIONS_1}

              onSelect={(item)=> { this.onPressButton.bind(item.ParkID,user.username,item.Park$Name,item.type)}}>

             <Text  style={[styles.text,{fontFamily: 'OpenSans-Regular'}]}>
             
             {data.name}
            </Text>

        </ModalDropdown>

[sukumardv3101]

Hi @priyanga2496 , You can Pass the dynamic data inside options like this <ModalDropdown options={dynamicData} renderRow={this.renderRow.bind(this)} onSelect={"Perform what ever you want"}

**** RendeRow Function **** renderRow(rowData, rowID, highlighted) { return( **** Do Something **** ) }

[priyanga2496]

@sukumardv3101 , Hi, Thanks for solution. But when i am trying to pass dynamic data inside option i wont be able to pass the items in onselect methhod which throws an error

<ModalDropdown options={this.state.parkdetails} //dynamic data renderRow={this.renderRow.bind(this)} onSelect={(item)=> { this.onPressButton.bind(item.ParkID,user.username,item.Park$Name,item.type)}}> //dyanmic data values which i have to pass to a function called onpressbutton //

             <Text  style={[styles.text,{fontFamily: 'OpenSans-Regular'}]}>
             
             {data.name}
            </Text>

[sukumardv3101]

Check the data what you are getting in onSelect. Then set that to state, you can use your state where ever you want.

[sukumardv3101]

Hi @priyanga2496 ,

Can please provide little more code regarding renderRow etc.

[priyanga2496]

Modaldropdown.txt

hi, @sukumardv3101 this is my detailed code