React Native - Listview Error getting data on the same screen

Question

What I am trying to do:

I am trying to have a page where you can search for particular items, this then sends a request to the API which returns back a set of values based on this search.

Currently, I am using a Listview which does not show until the user has put in their search term and clicked ok. Which once the user has clicked search, the list view is then updated with the reply.

What is happening:

When the user clicks searches, I get the following error:

Undefined is not an object (evaluating dataSource.rowIdentities)

Here is the code so far:

class Search extends Component {

    constructor(props) {
      super(props);

      this.state = {
          term: '',
          showResults: false,
          isSearch: false,
          SearchResults: ''
      }

      this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      this.state = {
        SearchResults: this.ds.cloneWithRows(["Row 1", "Row 2"]),
      };
    }

    onSearchButtonPress() {

        this.setState({isSearch: true});

    }

    _renderCategoryIcon() {


    }

    _renderSearchResults(item) {

      return (
          <Text>Hello world</Text>


      )
    }
    render() {

      if(this.state.isSearch)
      {
          return (
              <ViewContainer>
                <StatusBarBackground style={{backgroundColor: "#009fe3"}} navigator={this.props.navigator} />

                <SearchBar
                  placeholder='Search'
                  onChangeText={(text)=> this.setState({term: text})}
                  onSearchButtonPress={this.onSearchButtonPress.bind(this)}
                />

                <ListView
                  style={styles.containerView}
                  enableEmptySections={true}
                  horizontal={false}
                  initialListSize={10}
                  dataSource={this.state.SeachResults}
                  automaticallyAdjustContentInsets={false}
                  renderRow={(item) => { return this._renderSearchResults(item) }} />

              </ViewContainer>
          );

      }else{

        return (
          <ViewContainer>
            <StatusBarBackground style={{backgroundColor: "#009fe3"}} navigator={this.props.navigator} />

            <SearchBar
              placeholder='Search'
              onChangeText={(text)=> this.setState({term: text})}
              onSearchButtonPress={this.onSearchButtonPress.bind(this)}
          />


          </ViewContainer>
        )

      }
    }
}


const styles = StyleSheet.create({
  title: {
    fontSize:30,

  },

});

Answer 1

You have set your default SearchResults as an empty string. Use an empty array instead:

this.state = {
    term: '',
    showResults: false,
    isSearch: false,
    SearchResults: this.ds.cloneWithRows([])
}