Filter array in React Native

Question

I try to filter array. I need "live filtering" when a user types something in search input in React Native, but I do it like I usually do filter in React. Something goes wrong. Can you take a look and tell me where is a mistake? Now I have error: undefined is not an object (this.state.inputValue.trim) I think that maybe I should do some another way for a filter?

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, Image, TouchableOpacity, TextInput } from 'react-native';
import { TopName, BottomName, TitleLedger } from '../common/text';
import styles from './style';

const rows = [{
  "img": require('../../assets/avatar.png'),
  "name": "Johnny",
  "nick": "@johny",
},{
  "img": require('../../assets/avatar.png'),
  "name": "Johnny",
  "nick": "@johny",
},{
  "img": require('../../assets/avatar.png'),
  "name": "Alex",
  "nick": "@alex",
},{
  "img": require('../../assets/avatar.png'),
  "name": "Johnny",
  "nick": "@johny",
}];

export default class Payment extends Component {
    state={
        inputValue: ''
    }
    onChangeHandler = (e)=> {
         this.setState({inputValue: e.target.value})
         console.log(e.target.value, 'value')
     }
  render() {
    const inputValueLet = this.state.inputValue.trim().toLowerCase();
    let rowsNew = [];
    if(rows.length>0){
            rowsNew = rows.filter(row => {
                return row.name.toLowerCase().match( inputValueLet )
            });
        }
    const { navigator } = this.props;
    const dataRow = rowsNew.map((row, index) => {
            return (
              <View style={styles.content}>
              <Image source={row.img} style={styles.avatar}/>
              <View key={index} id={index} style={styles.operation}>
                <View style={styles.wrapper}>
                  <View style={styles.topName}>
                    <TopName label={row.name} />
                  </View>
                  <View style={styles.bottomName}>
                    <BottomName label={row.nick} />
                  </View>
                </View>
              </View>
              </View>
            )
          })
    return (
        <View>
          <View>
            <TextInput
              style={styles.searchBar}
              type="text"
              value={this.state.inputValue}
              onChange={this.onChangeHandler}
              placeholder='Search'
              />
          </View>
        <View style={styles.container}>
            {dataRow}
        </View>
      </View>
    );
  }
}

There's already a correct answer, but in addition I point you that you could write: const rowsNew = rows.filter(row => row.name.toLowerCase().match(inputValueLet); directly instead of that existing code. — Samuli Hakoniemi
– Samuli Hakoniemi, Commented Aug 9, 2017 at 12:30

Yury Tarabanko · Accepted Answer · 2017-08-09 11:42:43Z

1

There is no event.target.value in react native TextInput#onChange. Use event.nativeEvent.text or onChangeText event where you get text as callback argument.

<TextInput
          style={styles.searchBar}
          type="text"
          value={this.state.inputValue}
          onChangeText={inputValue => this.setState({ inputValue })}
          placeholder='Search'
          />

answered Aug 9, 2017 at 11:42

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mayank Shukla · Accepted Answer · 2017-08-09 13:23:51Z

0

inputValue in your state is declared as string ''.

state = {
     inputValue: ''
}

To resolve error undefined is not an object (this.state.inputValue.trim).

I think you should declare inputValue as object :

state = {
     inputValue: {}
}

edited Aug 9, 2017 at 13:23

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

answered Aug 9, 2017 at 11:34

Anurag Singh Bisht

2,7514 gold badges22 silver badges27 bronze badges

Comments

DianaS pencer · Accepted Answer · 2023-01-24 10:45:21Z

0

onChange={(e)=>{setSearch(e.target.value)}}

users.filter(item=>item.name.toLocaleLowerCase().includes(search.toLocaleLowerCase())).map((item)=>

edited Jan 24, 2023 at 10:45

answered Jan 23, 2023 at 21:22

DianaS pencer

11 bronze badge

1 Comment

hakre Over a year ago

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Collectives™ on Stack Overflow

Filter array in React Native

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related