Why is this returning the error .contains() is not a function

user_9796841 0
Viewed 46917

Am getting the error .contains() is not a function. Full code is here, probably too much to paste here so here's the relevant bits. Locations is globally set as well as query, then set state in the component.

*edit, o is the individual location, there are 5 titles and long/latitutes from the json file

let locationslist = this.state.locations
.filter(o => o.contains(this.state.query))
.map(o => <li key={o}
  type="button"
  className="btn"
  id="filterMarker"
  tabIndex="0">{o}</li>)

render() {
return (
<div>
  <div id="filtercontainer">
  <input
    id="filterbar"
    type="text"
    placeholder="Filter"
    onChange={this.handleQueryChange} value={this.state.query} />
    <ul>
    {this.state.locationslist}
    </ul>
  </div>
  <div id="map" />
</div>
)
}
reactjs frontend google-maps javascript
4 Answers

You are calling contains on your location object. Did you mean to check if the title contains the query string?

Try o.title.includes(this.state.query) instead.

contains appears to be deprecated. You should use includes instead.

user_39738440

It looks like locations is a simple Javascript object from JSON. Are you looking for a specific key? If so, I'd go with o => o[this.state.query]. If you're looking for the title match, I'd go with o => o.title.contains(this.state.query) or even better, make it case insensitive with o => o.title.toLowerCase().contains(this.state.query.toLowerCase())

user_103353080

You are calling an array method on a Obj not and array

user_59482360

You need to check exact property of the object. Contains will work only on strings or simple array, not array of abject. Should try like object.searchingProperty.Constains(searchingText);

user_28508000
Related