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

Question

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>
)
}

Answer 1

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.

Answer 2

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())