Search data in ListView react native

Question

I'm currently learning react-native and getting stuck in ListView problems. I want to search data in ListView from a TextInput and i expect that the result is in ListView too.

Here's what i've done so far:

var PageOne = React.createClass({
  getInitialState:function(){
    return{
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
      colorProps: {
        titleColor: 'white',
      },
      searchText:"",
    }
  },

  componentDidMount() {
    this.fetchData();
  },

  fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
          loaded: true,
        });
      })
      .done();
  },

  setSearchText(action){
    let searchText = event.nativeEvent.text;
    this.setState({searchText});

    /*
     *
     * 
     */

  },

  render() {
    return (
      <View style={{ flex: 1 }}>
        <ToolbarAndroid
          title="Movies"
          {...this.state.colorProps}
          style={{height:40, backgroundColor:'blue'}}
           />
        <TextInput
          placeholder="Search movies......."
          value={this.state.searchText}
          onChange={this.setSearchText.bind(this)} />
        <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderMovie}
        style={styles.listView}
        />
      </View>
    );
  },

  renderMovie(movie) {
    return (
    <TouchableOpacity onPress={this._handlePressList.bind(this, movie)}>
      <View style={styles.container}>
        <Image
          source={{uri: movie.posters.thumbnail}}
          style={styles.thumbnail}
        />
        <View style={styles.rightContainer}>
          <Text style={styles.title}>{movie.title}</Text>
          <Text style={styles.year}>{movie.year}</Text>
        </View>
      </View>
    </TouchableOpacity>
    );
  },

what am i supposed to do next? Please help. Thanks :)

Update! After read the answer from urbancvek, i add function in setSearchText() method like this:

setSearchText(event){
    const searchText = event.nativeEvent.text;
    
    moviesLength = this.state.movies.length;
    aMovie = this.state.movies;

    const filteredMovies = this.state.movies.filter(checkTitle);
    console.log("movies: " + JSON.stringify(filteredMovies));

    function checkTitle() {
        for(i=0;i<moviesLength;i++){
          if(aMovie[i].title === searchText){
            console.log("found:  " + aMovie[i].title);
            return aMovie[i];
          }
        }
    }
    
    this.setState({
        searchText,
        dataSource: this.state.dataSource.cloneWithRows(filteredMovies),
    });
  },

But it always show me all the movies, not filtered one. any ideas? thanks

Answer 1

In your fetchData method you should probably save responseData to state too. You will then interact with this data each time search field changes.

fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
          movies: responseData.movies,
          loaded: true,
        });
      }).done();
 },

Now in your setSearchText() method you should include some filter function that will find the movies you want from the movies you saved to state in fetchData().

setSearchText(action){
    const searchText = event.nativeEvent.text;
    const filteredMovies = this.state.movies.filter(/* awesome filter function */);

    this.setState({
        searchText,
        dataSource: this.state.dataSource.cloneWithRows(filteredMovies);
    });
},

Each time you want to update ListView you have to update it's dataSource. Only this way ListView component can realize that the data it's displaying has changed.

Hope I helped.