'how to make conditional rendering for google-autocomplete

For the places autocomplete we had been using Algolia places. Since Algolia places will be sunset end of May 2022, I am looking for an alternative. Google autocomplete looks great as an alternative. Here is my simple piece of code in react typescript:

import Autocomplete from 'react-google-autocomplete'

<Autocomplete
    apiKey={'API_KEY'}
    style={{ width: '100%' }}
    onPlaceSelected={(place) => {
        console.log(place)
    }}
    options={{
        types: this.state.locationType === 0 ? ['country'] : ['(cities)'],
    }}
/>

What I am try to do is that types in Autocomplete should be either country or cities depending on the state locationType. The problem is that it doesn't change the types though the state locationType is get changed. Let's say initial state for locationType is 0 and it shows list of predictions for countries. But when the state locationType gets updated to 1 it still shows the list of predictions for countries not for the cities.

I am not sure what I am doing wrong here. Could anyone help me out?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'how to make conditional rendering for google-autocomplete

Sources

Related Questions