CODEWITHSUNDEEP
reactjs
jim
jim

Reputation: 1116

Reactjs save current state of component

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.

Upvotes: 4

Views: 3794

Answers (4)

xSkrappy
xSkrappy

Reputation: 747

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

Upvotes: 4

Tony Bui
Tony Bui

Reputation: 1299

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.

Upvotes: 0

Zain Ul Abideen
Zain Ul Abideen

Reputation: 1602

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

Upvotes: 1

JW.
JW.

Reputation: 51638

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.

Upvotes: 1

Related Questions