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?