Styjun

How do email clients "send later" without storing a password?

What is my breathable atmosphere composed of?

Why does the speed of sound decrease at high altitudes although the air density decreases?

How to publish superseding results without creating enemies

If I want an interpretable model, are there methods other than Linear Regression?

Diffraction of a wave passing through double slits

What is this unknown executable on my boot volume? Is it Malicious?

2000s space film where an alien species has almost wiped out the human race in a war

Should I leave the first authorship of our paper to the student who did the project whereas I solved it?

Are Democrats more likely to believe Astrology is a science?

How are aircraft depainted?

Why is Kirchhoff's voltage law true in a DC circuit?

Finding the number of digits of a given integer.

In Germany, how can I maximize the impact of my charitable donations?

Parallel resistance in electric circuits

Is there a real-world mythological counterpart to WoW's "kill your gods for power" theme?

Why did it become so much more expensive to start a university?

I was promised a work PC but still awaiting approval 3 months later so using my own laptop - Is it fair to ask employer for laptop insurance?

Were Roman public roads build by private companies?

What is the derivative of an exponential function with another function as its base?

How does a simple logistic regression model achieve a 92% classification accuracy on MNIST?

Is たらと some form of conditional?

Is a suit against a University Dorm for changing policies on a whim likely to succeed (USA)?

What explanation do proponents of a Scotland-NI bridge give for it breaking Brexit impasse?

Filterbar doesn't reset data when empty React-Native

Hide keyboard in react-nativeWhat is the difference between using constructor vs getInitialState in React / React Native?What is the difference between React Native and React?react native - nativeEvent property?react-native trigger enter key press in afterSearch when the user stops typingProper use of onChangeText in React Nativefetch data in react native from mlabNot able to navigate to other page in react nativeModalFilterPicker load more on scrollnavigate from another screen on click navigationDrawerLayout menu

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

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>
 );
 

react-native filter asyncstorage

share|improve this question

asked Mar 28 at 10:21

ZirekZirek

18522 silver badges1515 bronze badges

add a comment
 | 

1

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>
 );
 

react-native filter asyncstorage

share|improve this question

asked Mar 28 at 10:21

ZirekZirek

18522 silver badges1515 bronze badges

add a comment
 | 

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>
 );
 

react-native filter asyncstorage

share|improve this question

asked Mar 28 at 10:21

ZirekZirek

18522 silver badges1515 bronze badges

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>
 );
 

share|improve this question

asked Mar 28 at 10:21

ZirekZirek

18522 silver badges1515 bronze badges

share|improve this question

asked Mar 28 at 10:21

ZirekZirek

18522 silver badges1515 bronze badges

asked Mar 28 at 10:21

ZirekZirek

18522 silver badges1515 bronze badges

asked Mar 28 at 10:21

ZirekZirek

18522 silver badges1515 bronze badges

1 Answer
1

active

oldest

votes

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>
 );
 );
 ;

share|improve this answer

answered Mar 28 at 10:35

Patel DharaPatel Dhara

56022 silver badges99 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ah I felt that data has to be duplicated first but totally didn't know how to do it next, everything works perfectly! thank you so much mate:)
  
  – Zirek
  Mar 28 at 10:40
  

  
  
  
  

add a comment
 | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55395166%2ffilterbar-doesnt-reset-data-when-empty-react-native%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

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>
 );
 );
 ;

share|improve this answer

answered Mar 28 at 10:35

Patel DharaPatel Dhara

56022 silver badges99 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ah I felt that data has to be duplicated first but totally didn't know how to do it next, everything works perfectly! thank you so much mate:)
  
  – Zirek
  Mar 28 at 10:40
  

  
  
  
  

add a comment
 | 

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>
 );
 );
 ;

share|improve this answer

answered Mar 28 at 10:35

Patel DharaPatel Dhara

56022 silver badges99 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ah I felt that data has to be duplicated first but totally didn't know how to do it next, everything works perfectly! thank you so much mate:)
  
  – Zirek
  Mar 28 at 10:40
  

  
  
  
  

add a comment
 | 

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>
 );
 );
 ;

share|improve this answer

answered Mar 28 at 10:35

Patel DharaPatel Dhara

56022 silver badges99 bronze badges

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

componentWillMount()
 this.setState(data: //set your data, filterData: //set same 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.

 ;

_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>
 );
 );
 ;

share|improve this answer

answered Mar 28 at 10:35

Patel DharaPatel Dhara

56022 silver badges99 bronze badges

answered Mar 28 at 10:35

Patel DharaPatel Dhara

56022 silver badges99 bronze badges

answered Mar 28 at 10:35

Patel DharaPatel Dhara

56022 silver badges99 bronze badges