Autocomplete - How can I set a default value?

Question

Does anyone know how to add a default value to the Autocomplete component? The component have a dataSource, and I'd like to load the page with a specific item already selected(e.g. fill the text field with the selected item's text and it's value already set).

Does anyone knows how? Big thanks for any help <3

Answer 1

You can achieve this by setting the appropriate state in componentDidMount, for example:

componentDidMount() {
    // load your items into your autocomplete

    // set your default selected item
    this.setState({ allItems: [itemYouWantToSet], selectedItem: item.name, selectedItemId: item.id }
}

render() {
    return (
		<Autocomplete
		    value={this.state.selectedItem}
		    items={this.state.allItems}
		    getItemValue={(item) => item.name}
		    onSelect={(value, item) => {
		        this.setState({ selectedItem: value, selectedItemId: value, allItems: [item] });
		    }}
		/>
    )
}

Then your item is correctly selected from the list of available options when it loads.