I am using react-native-searchable-dropdown for my react native project.

When onTextChange is fired I make a call to my backend with the text the user inputs. Then I set the data I get back (array of objects) in the state:

async inputBrandText (text) {
      const brands = await SearchForBrands(params);
      this.setState((state) => {
          return state.brands = brands
      })
};

In the items element I reference this state array:

<SearchableDropdown
    textInputProps={
        {
            placeholder: "",
            underlineColorAndroid: "transparent",
            style: {
               ...
            },
            onTextChange: text => this.inputBrandText(text)
        }
    }
    items={this.state.brands}
/>

But the items get refreshed one key stroke after it should actually be refreshed. So I think when the onTextChange event is fired, the items object or array is read in. Then I change the this.state.brands object with the data from the backend. But then no update occurs and the items object is not updated. Therefor the old items object is shown.

How can I solve this problem in a class based component?

Thanks!

PS: This is my ComponendDidMount:

async componentDidMount () {
  const brands = await SearchForBrands(params);
  this.setState((state) => {
      return state.showBrandSuggestions = brands
  })
}