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;`