Filterbar doesn't reset data when empty React-Native

Question

I'm making app in react-native with posting and getting data from asyncStorage, everything works well, i can save a data and get it but I have problem to set filter bar properly. It works only in one direction, for example when I write something inside input, i see results which fits, however when i delete characters from input, data doesn't back to normal and i see nothing eventho filterBar is empty, does anyone has suggestions how to fix it?

constructor(props) {
    super(props);
    this.state = {
      search: "",
      data: [],
      error: ""
    };
  }

 handleTextChange = search => {
    this.setState({ search });
    let data = this.state.data;

    data = data.filter(el => el.name.match(search))
    this.setState({data:data})

  };

_displayAllData = () => {
    return this.state.data.map(el => {
      return (
        <View>
          <Text >
            Nazwa: <Text>{el.name}</Text>
          </Text>

          <View>
              <Text>
                Ulica: <Text>{el.street}</Text>
              </Text>           
            </View>
        </View>
      );
    });
  };

render() {
    return (
      <ScrollView>
        <View style={styles.container}>
          <View style={styles.inputContainer}>
            <TextInput
              placeholder="find results"
              onChangeText={this.handleTextChange}
              value={this.state.search}
            />
          </View>

          {this._displayAllData()}

          <View>
            <Text>{this.state.error}</Text>
          </View>
        </View>
      </ScrollView>
    );
  }

Answer 1

This is happening because you are performing filtering to your original list(Data Array). Try one thing, take two arrays, one for to show filter data list and one for an original data list.

Please see below code. Let me know if there is any problem with this solution.

constructor(props) {
    super(props);
    this.state = {
      search: "",
      data: [], 
      filterData:[], // take one more list to show filter data list
      error: ""
    };
  }

Initially, add same data to both list:

componentWillMount(){
 this.setState({data: //set your data, filterData: //set same data})
}

HandleSearch Data:

 handleTextChange = search => {
    this.setState({ search });
    let data = this.state.data; 
    //apply filter to your original list
    data = data.filter(el => el.name.match(search))
    this.setState({filterData:data}) //set filter result in your filterData list.

  };

Use filterDataList to show your list

_displayAllData = () => {
    return this.state.filterData.map(el => {
      return (
        <View>
          <Text >
            Nazwa: <Text>{el.name}</Text>
          </Text>

          <View>
              <Text>
                Ulica: <Text>{el.street}</Text>
              </Text>           
            </View>
        </View>
      );
    });
  };