moroshko / react-autosuggest

WAI-ARIA compliant React autosuggest component

Home Page:http://react-autosuggest.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Failed prop type: The prop `suggestions` is marked as required in `Autosuggest`, but its value is `undefined`.

mehul-accrete opened this issue · comments

Error:

Warning: Failed prop type: The prop suggestions is marked as required in Autosuggest, but its value is undefined.
in Autosuggest (at AutoSuggestComponent.js:135)

Uncaught TypeError: Cannot read property 'length' of undefined
at Autosuggest.willRenderSuggestions (Autosuggest.js:505)
at Autosuggest.UNSAFE_componentWillReceiveProps (Autosuggest.js:327)
at callComponentWillReceiveProps (react-dom.development.js:12976)
at updateClassInstance (react-dom.development.js:13178)
at updateClassComponent (react-dom.development.js:17107)

The above error occurred in the component:
in Autosuggest (at AutoSuggestComponent.js:135)
in div (at AutoSuggestComponent.js:134)

Autosuggest.js:505 Uncaught TypeError: Cannot read property 'length' of undefined
at Autosuggest.willRenderSuggestions (Autosuggest.js:505)
at Autosuggest.UNSAFE_componentWillReceiveProps (Autosuggest.js:327)
at callComponentWillReceiveProps (react-dom.development.js:12976)
at updateClassInstance (react-dom.development.js:13178)
at updateClassComponent (react-dom.development.js:17107)

My code here:
`import React, {useState, useEffect} from "react";
import Autosuggest from 'react-autosuggest';
import { listAll } from "../services/MyService";

const AutoSuggestComponent = () => {
const [value, setValue] = useState("");
const [suggestions, setSuggestions] = useState([]);

const getSuggestions = (value) => {

if (value.length <= 1) {
    return [];
}
	let q = '';
	if (value !== '') {
		q = "&query=" + value;
	}
 
 listAll(q).then((res) => { 
  const data = res.data;
  const listData = [];
  data.forEach((item) => {
    listData.push({
      name: item.name
    });
  });
		console.log(listData, "listdata");
		return listData;
	});

};

return (
<div>
  <Autosuggest
    suggestions={suggestions}
    onSuggestionsClearRequested={() => setSuggestions([])}
    onSuggestionsFetchRequested={({ value }) => {
      console.log(value);
      setValue(value);
      setSuggestions(getSuggestions(value));
    }}
    onSuggestionSelected={(_, { suggestionValue }) =>
      console.log("Selected: " + suggestionValue)
    }
    getSuggestionValue={suggestion => suggestion.name}
    renderSuggestion={suggestion => <span>{suggestion.name}</span>}
    inputProps={{
      placeholder: "Type 'c'",
      value: value,
      onChange: (_, { newValue, method }) => {
        setValue(newValue);
      }
    }}
    highlightFirstSuggestion={true}
  />
</div>

);
};
export default AutoSuggestComponent;`