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

Solution 1

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

Solution 2

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.

Solution 3

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

Solution 4

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

View more solutions

Comments

[3noki]

I want to iterate over the locations from the data that comes from the json file, and create a li element for each, then they filtered with the title match.

[3noki]

Okay I will use includes instead. Yes, I do want to check if the title contains the query string to filter the li elements. If I use o.title.includes(this.state.query), I get the error "objects are not valid as a React child ". Can you somehow use filter to iterate over locations like locations[i].title?

[Jan Wendland]

I cloned your project and without ever having touched React before I can see a lot of things which are seriously wrong. Those issues are not related to the initial question you posted here (the error you encountered and asked about is fixed by what I proposed). I suppose you put a little bit more effort into your project and try to fix the remaining issues. Feel free to post follow-up questions if you get stuck.

[Scott Anderson]

.contains() is not an object method - it is for DOM Node classes: developer.mozilla.org/en-US/docs/Web/API/Node/contains

[sudo]

I was confused because contains works in my browser for strings but not in NodeJS. Thanks. Using includes.