I'm trying to create an autoplete field that fetches the options from the ponents state (the state fetches it from the backend). This is my ponent:

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/autoplete/?str=` + location)
      .then(res => {
        setOptions(res.data);
      })
  },[location])

  return <Box display="flex" height="30%">
    <Typography>{name}</Typography>
    <Autoplete
      id="bo-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(Autoplete)`, expected `array`.
    in ForwardRef(Autoplete) (created by WithStyles(ForwardRef(Autoplete)))
    in WithStyles(ForwardRef(Autoplete)) (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!

I'm trying to create an autoplete field that fetches the options from the ponents state (the state fetches it from the backend). This is my ponent:

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/autoplete/?str=` + location)
      .then(res => {
        setOptions(res.data);
      })
  },[location])

  return <Box display="flex" height="30%">
    <Typography>{name}</Typography>
    <Autoplete
      id="bo-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(Autoplete)`, expected `array`.
    in ForwardRef(Autoplete) (created by WithStyles(ForwardRef(Autoplete)))
    in WithStyles(ForwardRef(Autoplete)) (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!

• javascript
• reactjs
• typescript
• autoplete
• material-ui

• Can you console.log(option) after you fetched it? My assumption is that is an object, not an array – Magofoco Commented Sep 8, 2020 at 19:30
• thank you so much! apparently when server returned error, it really was an object. solved! – Rotem Linik Commented Sep 8, 2020 at 19:34
• No problem! If you are satisfied with the answer, accept it below – Magofoco Commented Sep 8, 2020 at 19:36

2 Answers 2

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(Autoplete)", expected "array". So it expects an array but you are providing an object

  <Autoplete
              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",
                  }}
                />
              )}
            />