CODEWITHSUNDEEP
javascriptreactjsautosuggest
RRR uzumaki
RRR uzumaki

Reputation: 1328

React Autosuggest throwing error on clicking the suggestions

I am using React-autosuggest in my code but the issue i am facing is this that whenever i am clikcing any suggestion i am getting error that

Uncaught TypeError: Cannot read property 'trim' of undefined

Here is my code

var subjectsToBeSearched= []

const getSuggestions = value => {
  const inputValue = value.trim().toLowerCase();
  const inputLength = inputValue.length;

  return inputLength === 0
    ? []
    :subjectsToBeSearched.filter(
        lang => lang.name.toLowerCase().slice(0, inputLength) === inputValue
      );
};
const getSuggestionValue = suggestion => suggestion.name;
`
const renderSuggestion = suggestion => <div>{suggestion.name}</div>;

export default class Searchbar extends Component {
  state = {
    language_id: "",
    subjects: [],
    value: "",
    suggestions: []
  };
  onChange = event => {
    this.setState({
      value: event.target.value
    },()=>console.log(this.state.value));
  };
  onSuggestionsFetchRequested = ({ value }) => {
    this.setState({
      suggestions: getSuggestions(value)
    });
  };
  onSuggestionsClearRequested = () => {
    this.setState({
      suggestions: []
    });
  };

  componentWillMount() {
    let languageid = localStorage.getItem("language_id");
    var userdata = window.localStorage.getItem("userdata");

    if (languageid == null) {
      localStorage.setItem("language_id", 0);
    }
    this.setState({ language_id: languageid, userdata: JSON.parse(userdata) });
    this.getAllSubjects();
  }

  getAllSubjects = async () => {
    let details = {
      language_id: this.state.language_id
    };

    this.setState({
      response: fetch("http://18.221.47.207:3000/get_subjects", {
        method: "GET",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          "Cache-Control": "max-age=31536000"
        }
      })
        .then(response => response.json())
        .then(responseJson => {
          this.setState(
            {
              subjects: responseJson
            },
            () => {
              let subjectsToBeFind = this.state.subjects.map(item => {
                return { id: item.subject_id, name: item.subject_name };
              });
              subjectsToBeSearched=subjectsToBeFind
            }
          );
        })
        .catch(error => {
          this.setState({
            loading: false
          });
          swal("Warning!", "Check your network!", "warning");
          console.log(error);
        })
    });
  };

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

    return (
      <div className={`${styles.InputHeaderSearchDiv} `}>
        <Autosuggest 
           inputProps={inputProps}
          className={`${styles.InputHeaderSearch}`}
          suggestions={suggestions}
          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        //   alwaysRenderSuggestions={true} 
          getSuggestionValue={getSuggestionValue}
          renderSuggestion={renderSuggestion}
        />
        <div className={`${styles.SearchIcon}`}>
          <img src={SearchIcon} alt="search" />
        </div>
      </div>
    );
  }
}

So when i click on any suggestion i just need to console and do some stuff but right away it throws error

Upvotes: 0

Views: 1711

Answers (2)

o-faro
o-faro

Reputation: 1031

in my case simply setting value of inputProps to string did it

<Autosuggest
inputProps: {
value: whateverValue.toString()

Upvotes: 2

MxG
MxG

Reputation: 81

When you click a suggestion, the value of the "value" key in the inputProps is undefined thats the reason that you are getting a cannot trim error.

A workaround I did is add a props called "onSuggestionSelected" ( Documentation for onSuggestionSelected found here ) and added a function that set the value of the "value" key in the inputProps to whatever value you want your input tag should have after the click event.

THIS IS HOW MY AUTOSUGGEST LOOKSLIKE

HERE IS MY FUNCTION

Upvotes: 3

Related Questions