How can i set the default or displayed value programatically? about react-native-modal-dropdown HOT 21 OPEN

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. 😆

from react-native-modal-dropdown.

@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.

from react-native-modal-dropdown.

@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.

from react-native-modal-dropdown.

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

from react-native-modal-dropdown.

@sohobloo Hey, can you please help.

from react-native-modal-dropdown.

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.

from react-native-modal-dropdown.

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?

from react-native-modal-dropdown.

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

from react-native-modal-dropdown.

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!

from react-native-modal-dropdown.

@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!

from react-native-modal-dropdown.

Hi sohobloo,

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

thank you,

from react-native-modal-dropdown.

@sukumardv3101
#55 (comment)

from react-native-modal-dropdown.

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

from react-native-modal-dropdown.

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.

from react-native-modal-dropdown.

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

from react-native-modal-dropdown.

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>

from react-native-modal-dropdown.

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 ****
)
}

from react-native-modal-dropdown.

@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>

from react-native-modal-dropdown.

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

from react-native-modal-dropdown.

Hi @priyanga2496 ,

Can please provide little more code regarding renderRow etc.

from react-native-modal-dropdown.

Modaldropdown.txt

hi, @sukumardv3101 this is my detailed code

from react-native-modal-dropdown.