autocomplete drop down not working when data get using the state

[kruz123]

hello, i am implement this library in my project and call my project api and get the data and set data in state and update the state but the problem is that when i give the data in the autocomplete in data attribute and when run the project then that time autocomplete not suggest the drop down. and not show the result but when i use the static array and after i apply then that time complete work. so please give me solutions.

here is my code----------------

import React, { Component } from 'react';
import { View, StyleSheet, SafeAreaView, AsyncStorage } from 'react-native';
import { Autocomplete, withKeyboardAwareScrollView } from "react-native-dropdown-autocomplete";

class demoDropDown extends Component {

constructor(props) {
    super(props);

    this.state = {
        stateList: []
    }

    this.container = React.createRef();
    this.handleChangeInput = this.handleChangeInput.bind(this);
}

componentDidMount = async () => {
    console.log("call componentDidMount");
    this.callCityApi();
}

callCityApi = async () => {
    console.log("call callCityApi");
    var apiUrl = 'MY API URL';

    var data = JSON.stringify({
        'authToken': 'UJTOBB'
    })

    // call ws
    fetch(apiUrl, {
        method: 'POST',
        headers: {
            // Accept: 'application/json',
            'Content-Type': 'application/json'
        },
        body: data,
    }).then((response) => {
        if (response.status === 200) {
            return response.json().then((responseData => {
                //  console.log("responsedata::" + JSON.stringify(responseData));   
                if (responseData.header.Status === 706) {
                    alert("706 ::+" + JSON.stringify(responseData));
                }
                else if (responseData.header.Status === 200) {
                    var stateListData = responseData.Data.CityList;
                    // console.log("stateListData::" + JSON.stringify(stateListData));   
                    console.log("stateListData ::" + stateListData.length);

                    AsyncStorage.setItem('stateListData', JSON.stringify(stateListData));

                    this.autoCompleteDropDown();
                }
                else {
                    alert("Other ::+" + JSON.stringify(responseData));
                }
            }))
        }
        else {
            alert("There is something wrong, please try again later, error code: " + response.status)
        }

    })
}

autoCompleteDropDown = () => {
    AsyncStorage.getItem('stateListData').then
        ((value) => {
            
            //console.log("Get value from async storage ::"+value);
            
            this.setState({
                stateList: value
            })
        })
}

handleChangeInput() {
  //console.log("on change text ::"+data);
}

handleSelectItem(item) {
    const { onDropdownClose } = this.props;
    onDropdownClose();
    console.log(item);
}

render() {
    console.log("call render");
    //console.log("stateList ::" + this.state.stateList);
    const { scrollToInput, onDropdownClose, onDropdownShow } = this.props;

    const data = this.state.stateList;
    
    return (
        <View style={styles.autocompletesContainer}>
            <SafeAreaView>
                <Autocomplete
                    ref={ref => {
                        this.container = ref;
                    }}
                    data={data}
                    inputContainerStyle={styles.inputContainer}
                    style={styles.input}
                    scrollToInput={ev => scrollToInput(ev)}
                    handleSelectItem={(item) => this.handleSelectItem(item)}
                    onDropdownClose={() => onDropdownClose()}
                    onDropdownShow={() => onDropdownShow()}
                    minimumCharactersCount={1}
                    onChangeText={() => this.handleChangeInput()}
                    highlightText
                    valueExtractor={item => item}
                />
            </SafeAreaView>
        </View>
    )
}

}

export default withKeyboardAwareScrollView(demoDropDown);

const styles = StyleSheet.create({
autocompletesContainer: {
paddingTop: 0,
zIndex: 1,
width: "100%",
paddingHorizontal: 8,
},
input: { maxHeight: 40 },
inputContainer: {
display: "flex",
flexShrink: 0,
flexGrow: 0,
flexDirection: "row",
flexWrap: "wrap",
alignItems: "center",
// borderBottomWidth: 1,
// borderColor: "#c7c6c1",
paddingVertical: 13,
paddingLeft: 12,
paddingRight: "5%",
width: "100%",
justifyContent: "flex-start",
},
container: {
flex: 1,
backgroundColor: "#ffffff",
},
plus: {
position: "absolute",
left: 15,
top: 10,
},
});

[pavelustenko]

try to rewrite class to use fetchData prop instead of data prop.

[Yariv-h]

Same issue here..

try to rewrite class to use fetchData prop instead of data prop.

is is possible to use with data? i would like to fetch the data only once

[lklima]

try:
{data && ( <Autocomplete data={data} />)}

[OleksandrFomin]

TypeScript throws a warning that prop data does not exist on Autocomplete type.
Property 'data' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Autocomplete> & Readonly<AutocompleteProps> & Readonly<...>'.

[temuccio]

Hi,
I have the same problem.
I load the <Autocomplete data={data} /> when {data} is ready but does't works
{data.length > 0 ? ( <Autocomplete data={data} />) : (console.log('not data')) }

[temuccio]

Sorry, I have solved....The problem is equired props that I have omissed.
With
<Autocomplete data={data} valueExtractor={item => item.descr} />
works fine.