I have Component A and Component B. In component A, users can apply filters to a list of elements and they navigate between the two components using a side bar. Whenever users click to go to B, and back to A, the filters are set back to the initial state. What is the best way to save the state of component A so that when they come back to it, they see all of the filters they originally applied.
I Suggest you to use LocalStorage , pass in the filter so that it won't be reset. Upon mounting the component , you should always check first if does the localstorage have a value or not.
you can set it via :
localStorage.setItem('variableName', value);
and get it via :
localStorage.getItem('variableName');
It sounds like A is being created/destroyed every time you switch views, so it loses any state that it was storing.
Move the state up to a parent component of both A and B, and pass it down to A via props. The parent component won't be destroyed, so the state will persist.
Thinking in React may help clarify this.
In my knowledge; State in react is not cleared until it is programmed to do so, the page is refreshed or going to another page. Maybe it'll be more clear if you provide your code. One thing which I used to keep previous State is following:
this.setState((previousState) => ({ stateName: previousState.stateName.concat(newValue) }))
I think the parent state of A and B won't change unless you refresh the page.
Another way, you can use AsynStorage or store that data on the Server to retrieve it later when coming back to component A even you refresh the page.
Related
Lets say I have only one component which fetches some data on being mounted.
I want to be able to change the url (pushState) once the component fetches that data however I dont want to change anything on the page or re-render the component.
Let's say I have a route '/' and it loads a which fetches searched contents on load. Once the data is fetched, I want to be able to update the url to say /searchterm
I am looking to do something similar to
window.history.pushState(null, null, '/searchterm') where the url is updated but nothing on the page changes.
Tried using with state and using this.props.history.push
You could store the route in your state, and then memoize the component with a function that returns true if the route changes, which will prevent an update. If you're still using class components, you can implement similar functionality using shouldComponentUpdate
I am using React router for making tabs.
I am stuck to solve one scenario, scenario is something like, say we have two tabs TabX and TabY. In TabX, I have made a form which takes some data as input. I have made a button Next. on click of that button I am sending parameters to another TabY using history.push.
Now, when I switch back to TabX, I will lose all my data filled earlier.
I am not able to find out way so that if I switch back to another tab, data will not be lost.
One more thing, I don't want to use redux.
In order to accomplish what you want you have to keep the state outside of the component that is being mounted and unmounted (TabX). Because you don't want to use a state container like redux, I would recommend to lift the state up. Read more about it here: https://reactjs.org/docs/lifting-state-up.html
One way to overcome this would be to use React Router Link.
With Link, you can pass a 'state' field, you can store your data in here, and then also do the same to return the data back the other way.
You can access this 'state' from this.props.history
https://reacttraining.com/react-router/web/api/Link
I hope this helps.
I have a page in my react/redux app that has a search field and I can make an ajax request based on input and display the result on the screen. The problem is that whenever I leave the page and return back it preserves the data I fetched. What is a conventional way of resetting a component whenever you leave the page? I should probably do something with componentWillUnmount function, but things don't quite work.
You store the state in a redux store. Thus the behavior - the data is still there in the store when you navigate between pages. It needs to be removed upon navigating away from page. This could be done by dispatching a reset action from the componentWillUnmount lifecycle method of the page component.
Do you need to be storing the fetched data in your redux store? If you are looking for the data to be loaded every time you go to the page and reset whenever you leave, just storing the data in component state would probably be a better fit, since it gives you that behavior by default.
I'm using Redux for state management. I haven't ran into many problems with it until I've moved my Navigation stack to use pop() appropriately. The issue is actually quite simple:
Route A displays some data and moves the user to Route B.
On Route B the user changed the data displayed on Route A.
The user then hits the back button, and pops to Route A.
Route A has not updated, even though the redux state has been.
I must then exit Route A, and return to Route A through a .push() in order for the changes to take affect.
I'm trying to find a solution for this, but cannot. Is there any way to determine when a component enters the front screen again? As render() isn't called again, because it doesn't receive any new props while in the background, so there' no reason for it to be called.
Basically on pop(), the component is already mounted so it won't re-render anything. I really hope they eventually add an onFocus() method to components but the way I handled it is by passing the method that updates component A to component B when you push, then invoke it when you're popping so component A will re-render with the new information.
I have a React component that represents a list of pages (used when paging through search results). For example, When I click on page 3, and then click a search result, a new page appears, and the component is destroyed. When I go back, it recreates the component, and the selected page is reset to 1. I want to keep the last selected page value, and default the selected page to that when the component is recreated. Where can I store a 'previouslySelectedPage' value, and how can I access it? (I'm a noob at React, do I have to store it in the state/props of a parent element that does not get destroyed when I click a search result, so that old values can be retained?)
One option is to store in the state of a parent that doesn't get unmounted and re-mounted. And then you can pass those state values as props to the child component.
The other option is to use something like redux to create data stores in your application. Adding redux to your app will not be a trivial undertaking but may provide some good value long term if your app is complex and will need to scale.