CODEWITHSUNDEEP
reactjstypescriptubuntu-18.04autosuggest
Tushar
Tushar

Reputation: 326

Not able to import react-autosuggest module showing the error below

I am importing the react-autosuggestion module but its showing error in my typescript file, I have Ubuntu v18 OS.

1st I did :

sudo npm install react-autosuggest --save

import Autosuggest from 'react-autosuggest';


const languages = [
  {
    name: 'C',
    year: 1972
  },
  {
    name: 'Elm',
    year: 2012
  },

];
// 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
  );
};
// the

const getSuggestionValue = suggestion => suggestion.name;


const renderSuggestion = suggestion => (
  <div>
    {suggestion.name}
  </div>
);

class Example extends React.Component {
  constructor() {
    super();


    this.state = {
      value: '',
      suggestions: []
    };
  }

  onChange = (event, { newValue }) => {
    this.setState({
      value: newValue
    });
  };

  // suggestions.

  onSuggestionsFetchRequested = ({ value }) => {
    this.setState({
      suggestions: getSuggestions(value)
    });
  };

  // suggestions.
  onSuggestionsClearRequested = () => {
    this.setState({
      suggestions: []
    });
  };

  render() {
    const { value, suggestions } = this.state;


    const inputProps = {
      placeholder: 'Type a programming language',
      value,
      onChange: this.onChange
    };

    return (
      <Autosuggest
        suggestions={suggestions}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        getSuggestionValue={getSuggestionValue}
        renderSuggestion={renderSuggestion}
        inputProps={inputProps}
      />
    );
  }
}

this error I got, when I hover on the import statement in my file

Could not find a declaration file for module 'react-autosuggest'. '/var/www/html/rennga-app/node_modules/react-autosuggest/dist/index.js' implicitly has an 'any' type. Try npm install @types/react-autosuggest if it exists or add a new declaration (.d.ts) file containing declare module 'react-autosuggest';ts(7016)

Upvotes: 2

Views: 792

Answers (1)

jsdeveloper
jsdeveloper

Reputation: 4045

you can't do this:

import AutoSuggest = require("react-autosuggest");

You are mixing nodejs style 'require' and es6 style imports in the same line.

Try either:

const AutoSuggest = require("react-autosuggest");

or:

import AutoSuggest from 'react-autosuggest'

Upvotes: 1

Related Questions