CODEWITHSUNDEEP
javascriptreactjsfilterreact-nativeredux
Chris
Chris

Reputation: 659

React Native cannot filter props

I'm currently building a search bar in react native and redux but cannot pass through my props in a format that can be filtered with text input. 

onInput(text) {
    this.setState({
      text,
    }); 
    /* Search after user stop typing */
    clearTimeout(this.inputDelay);
    this.inputDelay = setTimeout(() => {
      this.getResult(text);
    }, 1000);
  }

  getResult(text) {
    if (text.length > 0) {
      const { entitiesList } = this.props;
      const { dataSource } = this.state;

      console.log(this.props.entitiesList); // returns object containing an array
      const reg = new RegExp(text, 'i');
      const entities = entitiesList.filter((entity) => {
        return reg.test(entity.fullName);
      });
      this.setState({
        dataSource: dataSource.cloneWithRows(entities),
      });
    }

Unhandled JS Exception: _this3.props.entitiesList.filter is not a function is thrown. This.props.entitiesList does return an object so I'm not sure where I am going wrong.

{ performances: 
   [ { _id: '5893b419d2b38b7122dc24f6',
       fullName: 'Brett Monroe',
       Z3_performance_Id: '696395',
       A_relationship_Place: '1.',
       N_event_Division: 'Varsity',
       F_performance_Mark: '19.05',
       C_athlete_Id: '273452',
     },
     {...},
     {...}
   ]
}

Any tips / pointers appreciated!

Upvotes: 3

Views: 1488

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104379

Reason is entitiesList is an object, and you can't use filter or any other iterator like map, forEach etc directly on object. entitiesList contains a key performances, that is an array, so you need to use it like this:

  const entities = entitiesList.performances.filter((entity) => {
    return reg.test(entity.fullName);
  });

Upvotes: 4

Related Questions