'Material UI Autocomplete component not showing values from react state

I am trying to get value from the state for materialUI's autocomplete component.

I am facing the following problem : -

Autocomplte working fine for selecting the value and with onChange function it saving it into the state too. But when I refresh my page/ re-render it is not showing value on the textfeild(from saved state):

<Autocomplete
    name={"TideLocation"}
    disabled={p.disabled}
    options={data_source}
    getOptionLabel={option => option.text}
    inputValue={this.state.tidelocation_searchtext}
    onChange={_this.handleUpdateTideLocationField}
    onNewRequest={_this.handleChangeTideLocation}
    onBlur={_this.handleBlurTideLocationField}
    onUpdateInput={_this.handleUpdateTideLocationField}
      renderInput={(params) => (
       <TextField className="autoCompleteTxt"{...params} label="Location" />
    )}
/>

I tried with the debugger and found its getting value in this.state.tidelocation_searchtext but failed to set it with params.

Thanks in advance !! Ps: I tried with defaultValue and search text nothing worked for me

following is my ONchangeFunction

  handleUpdateTideLocationField = (str, value) => {
        debugger
        this.setState({tidelocation_searchtext: value.text});
    }

after selecting a value,following value saved in sate :

tidelocation_searchtext: "Auckland"

Solution 1:^[1]

If data/state not saved externally f.e. in local storage then it will be lost on page refresh, always. It's normal - like RAM memory without power - it (page/app state) only exists in memory !!

It's like using using cookie to keep you logged in.

If you really need such functionality then use f.e. redux-persist

Solution 2:^[2]

Removing inputValue has worked for me, even when passing object as options.

Using: "@material-ui/core": "^4.12.3"

Solution 3:^[3]

You are right, if object type options are passed, material-ui's AutoComplete component does not seem to reflect the value when mounted. (Perhaps a bug?)

I was able to get around this by passing the proper characters to inputValue.

@RebelCoder

Maybe you should have initialized tidelocation_searchtext.

Sources

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

Source: Stack Overflow

Solution	Source
Solution 1	xadm
Solution 2	Hafiz Temuri
Solution 3	Sygel4456

'Material UI Autocomplete component not showing values from react state

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]