React doesn't remember anything.. localStorage does!
To make the Home
component able to restore the last fetched matchday, I can use the localStorage
object.
Window.localStorage
is a small memory hosted by the clients' browser and it can be used to store some "helpers" values. To learn more about it, take a look at https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage.
Fetching the last fetched matchday
So, in the Home.tsx
constructor(props: IProps) {
super(props);
/** localStorage **/
let matchday;
if (localStorage.getItem('lastFetchedMatchday')) {
matchday = Number(localStorage.getItem('lastFetchedMatchday'));
} else {
matchday = 1;
localStorage.setItem('lastFetchedMatchday', matchday.toString());
}
/** localStorage **/
this.state = {
matchday,
matches: [],
competition: null,
error: false,
totalMatchdays: 38,
};
}
The code above, before setting the initial state, checks for a record in the localStorage
. This record is a key, value pair with the key equal to lastFetchedMatchday
.
At line 7 I used Number(...)
because the value I got from localStorage
is a string
and it needed to be converted into a number
(as defined with the interface
).
Setting the last fetched matchday
The value I fetch from the localStorage
needs to be set somewhere in the application. It makes sense to me setting it when I select a new matchday from the select
element.
handleChange = (event: any) => {
this.setState({ matchday: event.target.value }, () => {
/** localStorage **/
localStorage.setItem('lastFetchedMatchday', this.state.matchday.toString());
/** localStorage **/
this.fetch();
});
};
As before, I used this.state.matchday.toString()
because localStorage
stores strings as I can see from the method definition
Storage.setItem(key: string, value: string): void
Conclusion
At this point, once picked a matchday from the select, I don't lose my last selection even if I reload the page or if I close the browser.
Top comments (0)