Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Autosuggest
✓ import Autosuggest from 'react-autosuggest';
✗ import { Autosuggest } from 'react-autosuggest';
Autosuggest is a default export from the package.
Autosuggest (CommonJS)
✓ const Autosuggest = require('react-autosuggest');
Use this for CommonJS environments; typically, ESM imports are preferred in modern React projects.
Demonstrates the basic setup of `react-autosuggest` with static suggestions, including how to define `getSuggestions`, `getSuggestionValue`, `renderSuggestion`, and manage component state.
import React from 'react';
import Autosuggest from 'react-autosuggest';
// Imagine you have a list of languages that you'd like to autosuggest.
const languages = [
{
name: 'C',
year: 1972
},
{
name: 'Elm',
year: 2012
}
];
// Teach Autosuggest how to calculate suggestions for any given input value.
const getSuggestions = value => {
const inputValue = value.trim().toLowerCase();
const inputLength = inputValue.length;
return inputLength === 0 ? [] : languages.filter(lang =>
lang.name.toLowerCase().slice(0, inputLength) === inputValue
);
};
// When suggestion is clicked, Autosuggest needs to populate the input
// based on the clicked suggestion. Teach Autosuggest how to calculate the
// input value for every given suggestion.
const getSuggestionValue = suggestion => suggestion.name;
// Use your imagination to render suggestions.
const renderSuggestion = suggestion => (
<div>
{suggestion.name}
</div>
);
class MyAutosuggest extends React.Component {
constructor() {
super();
this.state = {
value: '',
suggestions: []
};
}
onChange = (event, { newValue }) => {
this.setState({
value: newValue
});
};
// Autosuggest will call this function every time you need to update suggestions.
// You already implemented this logic above, so just use it.
onSuggestionsFetchRequested = ({ value }) => {
this.setState({
suggestions: getSuggestions(value)
});
};
// Autosuggest will call this function every time you need to clear suggestions.
onSuggestionsClearRequested = () => {
this.setState({
suggestions: []
});
};
render() {
const { value, suggestions } = this.state;
// Autosuggest will pass through all inputProps to the input.
const inputProps = {
placeholder: 'Type a programming language',
value,
onChange: this.onChange
};
// Finally, render it!
return (
<Autosuggest
suggestions={suggestions}
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
getSuggestionValue={getSuggestionValue}
renderSuggestion={renderSuggestion}
inputProps={inputProps}
/>
);
}
}
export default MyAutosuggest;
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'setState') or similar lifecycle method errors.
This typically occurs when `react-autosuggest` v10+ is used with a React version older than 16.3.0, which removed or renamed certain lifecycle methods.
fixUpgrade your React and ReactDOM peer dependencies to at least `^16.3.0`. For example: `npm install react@^16.3.0 react-dom@^16.3.0`.
Warning: Failed prop type: The prop `suggestions` is marked as required in `Autosuggest`, but its value is `undefined`.
The `suggestions` prop must be an array, even if empty. If `onSuggestionsFetchRequested` is asynchronous, the initial state might not provide an array.
fixInitialize your component's state with `suggestions: []` and ensure that `onSuggestionsFetchRequested` always sets `suggestions` to an array, even an empty one, if no matches are found.
Suggestions are not visible or misaligned, despite `onSuggestionsFetchRequested` returning data.
This is often a CSS issue. The component expects specific class names to be themed, and if the default styling isn't applied or is overridden incorrectly, suggestions may not render visibly or be positioned off-screen.
fixEnsure you are importing the default CSS (`import 'react-autosuggest/dist/standalone/autosuggest.css';`) or providing a complete `theme` prop to `Autosuggest` that correctly styles the suggestions container (`suggestionsContainer`) and items (`suggestion`). Inspect with browser developer tools to check applied styles and element visibility.
Audit
Dependencies
reactrequiredRequired peer dependency for React component rendering.