title: How to filter data in ListView React-native?
body: <p>I am trying to filter my array object list and then trying to display in the ListView with new DataSource. However, the list is not getting filtered. I know that my filter function works correctly. ( I checked it in the console.log )</p>
  
  <p>I am using Redux to map my state to prop. And then trying to filter the prop. Is this the wrong way?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>/*global fetch:false*/
  import _ from 'lodash';
  import React, { Component } from 'react';
  import { ListView, Text as NText } from 'react-native';
  import { connect } from 'react-redux';
  import { Actions } from 'react-native-router-flux';
  import {
    Container, Header, Item,
    Icon, Input, ListItem, Text,
    Left, Right, Body, Button
  } from 'native-base';
  
  
  import Spinner from '../common/Spinner';
  import HealthImage from '../misc/HealthImage';
  import { assetsFetch } from '../../actions';
  
  const ds = new ListView.DataSource({
    rowHasChanged: (r1, r2) =&gt; r1 !== r2
  });
  
  class AssetsList extends Component {
    componentWillMount() {
      this.props.assetsFetch();
  
      // Implementing the datasource for the list View
      this.createDataSource(this.props.assets);
    }
  
    componentWillReceiveProps(nextProps) {
      // Next props is the next set of props that this component will be rendered with.
      // this.props is still equal to the old set of props.
      this.createDataSource(nextProps.assets);
    }
  
    onSearchChange(text) {
      const filteredAssets = this.props.assets.filter(
        (asset) =&gt; {
          return asset.name.indexOf(text) !== -1;
        }
      );
  
      this.dataSource = ds.cloneWithRows(_.values(filteredAssets));
    }
  
    createDataSource(assets) {
      this.dataSource = ds.cloneWithRows(assets);
    }
  
  
    renderRow(asset) {
      return (
        &lt;ListItem thumbnail&gt;
            &lt;Left&gt;
                &lt;HealthImage health={asset.health} /&gt;
            &lt;/Left&gt;
            &lt;Body&gt;
                &lt;Text&gt;{asset.name}&lt;/Text&gt;
  
                &lt;NText style={styles.nText}&gt;
                  Location: {asset.location} |
                  Serial: {asset.serial_number}
                &lt;/NText&gt;
                &lt;NText&gt;
                  Total Samples: {asset.total_samples}
                &lt;/NText&gt;
  
            &lt;/Body&gt;
            &lt;Right&gt;
                &lt;Button transparent onPress={() =&gt; Actions.assetShow()}&gt;
                    &lt;Text&gt;View&lt;/Text&gt;
                &lt;/Button&gt;
            &lt;/Right&gt;
        &lt;/ListItem&gt;
      );
    }
  
  
  
    render() {
      return (
       &lt;Input
                    placeholder="Search"
                    onChangeText={this.onSearchChange.bind(this)}
                  /&gt;
          &lt;ListView
            enableEmptySections
            dataSource={this.dataSource}
            renderRow={this.renderRow}
          /&gt;
  
  
      );
    }
  }
  
  const mapStateToProps = state =&gt; {
    return {
      assets: _.values(state.assets.asset),
      spinner: state.assets.asset_spinner
    };
  };
  
  export default connect(mapStateToProps, { assetsFetch })(AssetsList);
  </code></pre>
  
  <p>What am I doing wrong here? </p>