react-google-autocomplete component not updating when state updated

Question

{this.state.formValues && this.state.formValues.map((input, index) => (
    <div className="form-row" key={index}>
        <PikadayComponent value={input.date} handleDateChange={this.handleDateChange} index={index} />
        <div data-test={input.source} className="form-group input-group-sm col-3">
            <Autocomplete
                defaultValue={input.source}
                onPlaceSelected={(data) => {
                    this.handlePlaceChange(index, 'source', data.formatted_address);
                }}
            />
        </div>
        <div className="form-group input-group-sm col-3">
            <Autocomplete
                defaultValue={input.destination}
                inputAutocompleteValue={input.destination}
                onPlaceSelected={(data) => {
                    this.handlePlaceChange(index, 'destination', data.formatted_address);
                }}
            />
        </div>
        <div className="form-group input-group-sm col">
            <a onClick={event => this.removeRow(index)} href="javascript:void(0);">Remove</a>
        </div>
    </div>
))}

When I change this function works

handlePlaceChange(index, field, value) {
    this.state.formValues[index][field] = value;
    this.setState({ formValues: this.state.formValues});
}

This is removed correctly

async removeRow(index) {
    let formValues = this.state.formValues;
    formValues.splice(index,1);
    this.setState({formValues: formValues})
}

But my <Autocomplete.. view is not getting updated

Even after setting defaultValue it doesn't update when removeRow is called. I also tried with this plugin react-google-places-autocomplete facing similar issue. Hope I am missing something the react way. Anybody can help?

Answer 1

My working copy has this code,

<Autocomplete
    className="form-control"
    options={{
        types: ("bar", "establishment", "food", "lodging", "point_of_interest", "restaurant", "spa"),
        fields: ('geometry')
    }}
    placeholder="Source"
    debounce='1000'
    value={input.source}
    onChange={event => this.handlePlaceChange(index, 'source', event.target.value)}
    onPlaceSelected={(data, inputRef, autocomplete) => {
        this.handlePlaceChange(index, 'source', inputRef.value);
    }}
/>

I guess the onchange does the trick. Please check and confirm. Thanks for reminding.