defaultIndex property doesn't change after re-render cycle

[NicolayS]

Hello!

I'm trying to use Searchable-Dropdown in pretty simple components like that:

import React from 'react';
import {View} from 'react-native';
import SearchableDropdown from 'react-native-searchable-dropdown';

const DropDownList = props => {

return (

<SearchableDropdown
onItemSelect={(item) => {
props.onChoosingItem(item);
}}
defaultIndex = {props.defaultIndex}
containerStyle={styles.containerDDL}
itemStyle={{...styles.itemDDL,...props.itemStyle}}
itemTextStyle={{...styles.itemDDLText, ...props.textStyle}}
itemsContainerStyle={styles.itemContainerDDL}
items={props.ddlItems}
resetValue={false}
textInputStyle={{...styles.ddlTextInput,...props.textInputStyle}}
onTextChange = { text => console.log(text)}
listProps={
{
nestedScrollEnabled: true,
}
}
/>

);
};

const styles = StyleSheet.create({
itemDDL: {
padding: 2,
marginTop: 2,
backgroundColor: '#ddd',
borderColor: '#bbb',
borderWidth: 1,
},
itemDDLText: {
color: '#222'
},
ddlTextInput: {
padding: 5,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 5,
},
itemContainerDDL: {
maxHeight: 120
},
containerDDL: {
padding: 1
},
ddlView: {
margin: 10,
flexDirection: 'row'
},
label: {
textAlign: 'center',
padding: 5,
fontSize: 14,
fontWeight: "bold",
},
alignRules: {
justifyContent: 'flex-start',
alignItems: 'stretch'
}
});

export default DropDownList;

But for some reason, props.defaultIndex property is read very only first render cycle, after "DropDownList" 's rendered first time, SearchableDropdown doesn't try to read this value though the whole component ("DropDownList") is rendered every time when the props change, can you please explain why it works this way?

[NicolayS]

I see the reason, defaultIndex property is set on componentDidMount call only,as result defaultIndex won't be changed after first time, when the component has been mounted

[AlphaJuliettOmega]

OH MY WORD

Was sitting with this exact same bug, but in my case...

It was getting set correctly, BUT

defaultIndex={0}

gets evaluated to false, thus removing the selection.

ie. keeping the selected index in state and tabbing back and forth between a wizard, it's not possible with this library to set the default selected index to the first item in a list of items.

[tenkunkyab]

@AlphaJuliettOmega yup, same here. defaultIndex={0} doesn't work. And adding an empty field doesn't sound like a good idea either. What approach worked for you?

Update: saw this
#23

[oberdan-dev]

@NicolayS How can I fix this? Could you give a hint?

[NazimMertBilgi]

@oberdan-dev
Try;

<SearchableDropdown
    ref={(ref) => this.searchableDropdownRef = ref}
    ...

const selectedItem = {
id:'deneme',
name:'deneme'
};
this.searchableDropdownRef.setState({ item: selectedItem })