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.