React Autosuggest

Common errors

• TypeError: Cannot read properties of undefined (reading 'setState') or similar lifecycle method errors.

  cause 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.
  fix Upgrade 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`.

  cause The `suggestions` prop must be an array, even if empty. If `onSuggestionsFetchRequested` is asynchronous, the initial state might not provide an array.
  fix Initialize 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.

  cause 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.
  fix Ensure 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.

Warnings

• breaking Version 10.0.0 introduced a breaking change by relying on `UNSAFE_componentWillReceiveProps`, which requires React version 16.3.0 or higher. Using `react-autosuggest` v10 with older React versions will result in runtime errors.
  Fix: Ensure your project's React dependency is `react@^16.3.0` or newer. Upgrade React if necessary: `npm install react@^16.3.0 react-dom@^16.3.0` or `yarn add react@^16.3.0 react-dom@^16.3.0`.

Install

• npm install react-autosuggest npm
• yarn add react-autosuggest yarn
• pnpm add react-autosuggest pnpm

Imports

• Autosuggest
  wrong:

  import { Autosuggest } from 'react-autosuggest';

  correct:

  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.

Quickstart

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;