import * as React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
export default function MovieComboBox() {
const [movieList, setMovieList] = React.useState([]);
const selectedValue = 1;
React.useEffect(() => {
fetch("https://reqres.in/api/users?page=1")
.then((res) => res.json())
.then(({ data }) => {
console.log(data);
setMovieList(data);
})
.catch((err) => console.log(err));
}, []);
return (
<Autocomplete
disablePortal
id="movie-combo-box"
defaultValue={
movieList.find((movie) => movie.id === selectedValue) || null
}
options={movieList}
getOptionLabel={(data) => data.first_name}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Choose Movie" />}
/>
);
}
If I remove the if condition, the behavior changes. The defaultValue starts as null and gets updated after fetching the data to display the exact value. However, sometimes the selected value may not show up in the autocomplete box.