I am using 'Material UI' Autoplete ponent to render a dropdown in my form. However, in case the user wants to edit an object then the dropdown should be displayed as autofilled with whatever value that's being fetched from the database.

I've tried to mock the situation using below code

import React, { Component } from 'react';
import Autoplete from '@material-ui/lab/Autoplete';
import TextField from '@material-ui/core/TextField';

export default class Sizes extends Component {
    state = {
        default: []
    }

    ponentDidMount() {
        setTimeout(() => {
            this.setState({ default: [...this.state.default, top100Films[37]]})
        })
    }

    render() {
        return (
                <Autoplete
                    id="size-small-standard"
                    size="small"
                    options={top100Films}
                    getOptionLabel={option => option.title}
                    defaultValue={this.state.default}
                    renderInput={params => (
                        <TextField
                            {...params}
                            variant="standard"
                            label="Size small"
                            placeholder="Favorites"
                            fullWidth
                        />
                    )}
                />
        );
    }
}

Here after the ponent is mounted, I'm setting a timeout and returning the default value that should be displayed in the dropdown

However, it's unable to display the value in the dropdown and I'm seeing this error in console -

index.js:1375 Material-UI: the `getOptionLabel` method of useAutoplete do not handle the options correctly.
The ponent expect a string but received undefined.
For the input option: [], `getOptionLabel` returns: undefined.

Apparently the state is getting updated when ponentDidMount is getting called but the Autoplete ponent's defaultValue prop is unable to read the same

Any idea what I might be getting wrong here?

Code sandbox link - ;hidenavigation=1&theme=dark

I am using 'Material UI' Autoplete ponent to render a dropdown in my form. However, in case the user wants to edit an object then the dropdown should be displayed as autofilled with whatever value that's being fetched from the database.

I've tried to mock the situation using below code

import React, { Component } from 'react';
import Autoplete from '@material-ui/lab/Autoplete';
import TextField from '@material-ui/core/TextField';

export default class Sizes extends Component {
    state = {
        default: []
    }

    ponentDidMount() {
        setTimeout(() => {
            this.setState({ default: [...this.state.default, top100Films[37]]})
        })
    }

    render() {
        return (
                <Autoplete
                    id="size-small-standard"
                    size="small"
                    options={top100Films}
                    getOptionLabel={option => option.title}
                    defaultValue={this.state.default}
                    renderInput={params => (
                        <TextField
                            {...params}
                            variant="standard"
                            label="Size small"
                            placeholder="Favorites"
                            fullWidth
                        />
                    )}
                />
        );
    }
}

Here after the ponent is mounted, I'm setting a timeout and returning the default value that should be displayed in the dropdown

However, it's unable to display the value in the dropdown and I'm seeing this error in console -

index.js:1375 Material-UI: the `getOptionLabel` method of useAutoplete do not handle the options correctly.
The ponent expect a string but received undefined.
For the input option: [], `getOptionLabel` returns: undefined.

Apparently the state is getting updated when ponentDidMount is getting called but the Autoplete ponent's defaultValue prop is unable to read the same

Any idea what I might be getting wrong here?

Code sandbox link - https://codesandbox.io/s/dazzling-dirac-scxpr?fontsize=14&hidenavigation=1&theme=dark

• javascript
• reactjs
• material-ui

3 Answers 3

For anyone else that es across this, the solution to just use value rather than defaultValue is not sufficient. As soon as the Autoplete loses focus it will revert back to the original value.

Manually setting the state will work however:

https://codesandbox.io/s/elegant-leavitt-v2i0h

Following reasons where your code went wrong:

1] defaultValue takes the value which has to be selected by default, an array shouldn't be passed to this prop.

2] Until your autoplete is not multiple, an array can't be passed to the value or inputValue prop.

Ok I was actually able to make this work. Turns out I was using the wrong prop. I just changed defaultValue to value and it worked.

Updated code pen link - codesandbox.io/s/dazzling-dirac-scxpr