React-bootstrap-typeeahead filterBy warning

Viewed 2483

I'm using react-bootstrap-typeahead to allow users to search through a list of people based on their names or emails. I'm following the custom filtering example here with the data fields option, and everything is working fine, except that I'm receiving multiple warnings in the console with each letter I type:

Warning: [react-bootstrap-typeahead] Fields passed to `filterBy` should have string values. Value will be converted to a string; results may be unexpected.

Below are the options I'm passing to the component:

const options = [
{displayName: "John Doe", fullName: "John Henry Doe", email: "john_doe@gmail.com"}, 
{displayName: "Jane Smith", fullName: "Jane Susan Smith", email: "jane_smith@gmail.com"} 
]

And here is my code for the typeahead itself:

render() {
const {
  isLoading,
} = this.state;
const filterByFields = ['email', 'displayName'];
return (
  <TypeAheadSearchWrapper>
    <Typeahead
      filterBy={filterByFields}
      labelKey="displayName"
      options={options}
      placeholder={this.props.placeholder}
      onChange={this.handleChange}
      minLength={3}
      onInputChange={this.handleTextInput}
      isLoading={isLoading}
      renderMenuItemChildren={option => (
        <div>
          {option.displayName}
          <div className="sub-text">{option.email}</div>
        </div>
      )}
    />
  </TypeAheadSearchWrapper>
);
}
}

I'm following the example exactly, and the items in 'filterByFields' are in fact strings. Any idea how to get rid of this warning?

1 Answers

The doc states that

The labelKey prop specifies the string that will be used for searching and rendering options and selections.

Since you want to search users by their full name and email you'll need to provide them as the labelKey

<Typeahead labelKey={option => `${option.fullName} ${option.email}`}/>
Related