javascript - How can i get back my data list after searching by words?

Question

i use Flatlist and search by words on renderHeader() function. I can filter but when i delete letters, i couldn't get main list again. I think there is a logic problem but i couln't find after trying something...

i've got a new one when i fixed problem. I tried to fix but i couldn't do that, i should put the problem in front of experts :)

import React, {Component, useState} from 'react'
import {
  Text,
  StyleSheet,
  View,
  FlatList,
  SafeAreaView,
  ScrollView,
  Image,
  TextInput,
} from 'react-native'
import data from '../../data'

const Flatlistexample = () => {
  //main list state
  let [list, setList] = useState(data);
  //search state
  const [search, setSearch] = useState('');
  //search filter
  searchFilter = text => {
    // onChangeText
    const newData = list.filter(item => {
      const listItem = `${item.name.toLowerCase()} ${item.company.toLowerCase()}`

      return listItem.indexOf(text.toLowerCase()) > -1;
    })
    setList(newData)
  }
  //search function
  renderHeader = () =>{
    return (
      <View style={styles.seachContainer}>
        <TextInput
          style={styles.textInput}
          placeholder={'Search...'}
          value={search}
          onChangeText={text => {
           
            //setStates

            searchFilter(text)
            setSearch(text)
          }}></TextInput>
        <Text
          style={{
            alignItems: 'flex-start',
            color: 'black',
            fontSize: 22,
          }}>
          {search}
        </Text>
      </View>
    )
    
  }
  return (
    <SafeAreaView
      style={{
        flex: 1,
      }}>
      <FlatList
        data={list}
        renderItem={({item, index}) => {
          return (
            <ScrollView>
              <SafeAreaView
                style={[
                  styles.container,
                  {backgroundColor: index % 2 === 0 ? '#fafafa' : '#bbb'},
                ]}>
                <Image style={styles.profile} source={{uri: item.picture}} />
                <View style={styles.rightside}>
                  <Text style={styles.name}>{item.name}</Text>
                  <Text style={styles.company}>{item.company}</Text>
                </View>
              </SafeAreaView>
            </ScrollView>
          )
        }}
        keyExtractor={item => item._id}
        //called search function
        ListHeaderComponent={renderHeader()}
      />
    </SafeAreaView>
  )
}

export default Flatlistexample

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderColor: 'gray',
  },
  profile: {
    width: 50,
    height: 50,
    borderRadius: 25,
    marginLeft: 10,
  },
  rightside: {
    marginLeft: 20,
    justifyContent: 'space-between',
    marginVertical: 5,
  },
  name: {
    fontSize: 22,
    marginBottom: 10,
  },
  searchContainer: {
    padding: 10,
    borderWidth: 2,
    borderColor: 'gray',
  },
  textInput: {
    fontSize: 16,
    backgroundColor: '#f9f9f9',
    padding: 10,
  },
})

question from:https://stackoverflow.com/questions/65860702/how-can-i-get-back-my-data-list-after-searching-by-words

Answer 1

Filter Data

onSearchText = (value) => {
  this.setState({searchText: value})
  if(value.trim() == "" || value == null){
    this.setState({list: this.state.list}
  } else {
    let filter = this.state.list.fillter(data => {
    // data fillter logic //
    return data;
    })
    this.setState({filterData: filter})
    }

Render FlatList

<FlatList
  extradata={this.state}
  data={searchText ? filterData : list}
 />