CODEWITHSUNDEEP
javascriptreactjs
J.Ko
J.Ko

Reputation: 8781

How to store an array on the page during session

I am new to react and I'd like to ask a high-level question. Any directional advice will be welcome.

So, here is what I did in vanilla JS. I defined an empty variable first, and put the results of a DB query there. Then created buttons I did filter operations to only populate the items that satisfied the filter criteria. So, to illustrate, it looks like this:

 const things = [
    {continent: Asia, country: Korea},
    {continent: Europe, country: France},
    {continent: Africa, country: Egypt},
    .....
 ];
 const filter (continent) = > {
     //Logic to filter based on continent criteria and return the countries
 };

This was possible in vanilla JS, because I could set aside the array variable in the script document and the functions would easily reference it.

The question is: how do I do something similar in react? i.e. what would be an equivalent way to store a variable that lasts as long as the page is active, so that I can do filter operations on them? Obviously, setting aside a variable outside of the component doesn't work after the page is rendered. Where should I look to resolve this?

Any advice will be appreciated. Thanks!

Upvotes: 0

Views: 87

Answers (2)

Todd R
Todd R

Reputation: 18516

If I understand correctly, you want to write data on a page server-side, and then load it into a React component client-side. I would try writing the data into a hidden element, probably in csv format, with an "id". Then, when your App component loads, use document.getElementById to retrieve the data. Pass that into your component tree, and filter away.

Sorry, I'm not able to test this out at the moment. There may be some gotchas with this approach, but if you don't want to fetch the data client-side, hopefully something like this will work.

Upvotes: 0

Harmenx
Harmenx

Reputation: 946

For this you can either do one of three things

  1. Pass an array defined at the top level between children and parents (can work for simple pages)
  2. Use the React Context Api https://reactjs.org/docs/context.html
  3. Look into a state management library like Redux (most recommended if your application is complex) - https://redux.js.org/introduction/getting-started/

Upvotes: 1

Related Questions