CODEWITHSUNDEEP
javascriptreactjstypescriptautocompletematerial-ui
Rotem Linik
Rotem Linik

Reputation: 175

material ui autocomplete doesn't recognize options parameter as array

I'm trying to create an autocomplete field that fetches the options from the components state (the state fetches it from the backend). This is my component:

export const Person: React.FC<PersonProps> = ({name, avatar, setMainState}: PersonProps) => {
  const [location, setLocation] = useState('');
  const [options, setOptions] = useState([]);
  const change = (event: any) => {
    setLocation(event.target.value)
    setMainState(event.target.value)
  }
  
  useEffect(() => {
    axios
      .get(`http://localhost:8080/autocomplete/?str=` + location)
      .then(res => {
        setOptions(res.data);
      })
  },[location])

  return <Box display="flex" height="30%">
    <Typography>{name}</Typography>
    <Autocomplete
      id="combo-box-demo"
      options={options}
      getOptionLabel={(option) => option as string}
      style={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
    />
  </Box>
};

But for some reason, the options array from my state isn't recognized as an array (although I initialized it with an empty array). I get this warning:

index.js:1 Warning: Failed prop type: Invalid prop `options` of type `object` supplied to `ForwardRef(Autocomplete)`, expected `array`.
    in ForwardRef(Autocomplete) (created by WithStyles(ForwardRef(Autocomplete)))
    in WithStyles(ForwardRef(Autocomplete)) (at Person.tsx:56)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (at Person.tsx:49)
    in Person (at Main.tsx:14)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (at Main.tsx:13)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (at Main.tsx:12)
    in Main (at App.tsx:11)
    in div (at App.tsx:10)
    in App (at src/index.tsx:6)

Do you have any idea what could be the cause? Any thoughts would be helpfull:) thanks!

Upvotes: 3

Views: 4372

Answers (2)

Gowri Shankar.M
Gowri Shankar.M

Reputation: 11

  <Autocomplete
              id="free-solo-2-demo"
              value={search.scheme_name}
              className={classes.textInput}
              options={[...schemeList]}
              getOptionLabel={(schemeList) => schemeList.scheme_name || ""}
              onChange={(e, value) => {
                if (value !== null) {
                  setSearch({ ...search, scheme_name: value });
                } else {
                  setSearch({ ...search, scheme_name: "" });
                }
              }}
              renderInput={(params) => (
                <TextField
                  {...params}
                  label="Scheme Name"
                  name="scheme_name"
                  // margin="normal"
                  variant="outlined"
                  size="small"
                  InputProps={{
                    ...params.InputProps,
                    type: "search",
                  }}
                />
              )}
            />

Upvotes: 1

Magofoco
Magofoco

Reputation: 5466

My assumption is that when you do: setOptions(res.data); you are setting the options to an object, not an array.

In fact the error says: ..."options" of type "object" supplied to "ForwardRef(Autocomplete)", expected "array". So it expects an array but you are providing an object

Upvotes: 5

Related Questions