I made a comment application using react
I have three input types (text, link, image) I want them still present the data even after refreshing (reload) the page
You can use localStorage for this. Have a look at localStorage
Related
I have a main menu with 4 pages. If I do a hard refresh when I am on any of the pages, React takes me back to the page 1 screen. I want the user to stay on the same page when hard refresh happens.
Main Menu
page 1
page 2
page 3
page 4
I'm thinking useRef would be helpful, though I don't know how to structure the logic. Ideas are most appreciated!
Nothing you store as React state persists page refreshes. The LocalStorage Browser API exists to solve this problem.
The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions. MDN
You could implement something like that in react with a custom hook like useLocalStorage that behaves similarly to useState, except that it will persists across page-refreshes using LocalStorage.
// persists across page loads
const [currentPage, setCurrentPage] = useLocalStorage('page-name')
I am using Redux store to save the stage of my page in React js but after a refresh of the page the stored data are set again to null as default. There is a way to Redux store data are stored until user press logout button on the page.
Do you know how to save the state and after a page refresh it will not disappear ? Or there is a tutorial that I can see or read ?
this is because redux maintains state until you refresh the page. To solve this problem you need to either write your data to localstorage or use react-router-dom
in last case state on save in your app not use localstorage.
warning. react - it SPA based framefork. please, use react-router-dom!
https://reactrouter.com/web/guides/quick-start
The problem that I'm facing now is, there's a profile tab which shows some information on itself. I typed interface solutions like "input". After I save its value to data(data that placed on another component, especially contained in this.state). Then I shifted to component which renders its interface. In detail, I mentioned its value to which to show. Soooooo, I can't understand that how to still show it after reload? I hope it pulls something from back-end or axios or git things. Briefly, "how to maintain the data on the profile tab after reload? I'm in react js stuff.
React state is just a variable which stores data. When you refresh your browser, the browser clears its value from memory and reinitilizes that variable.
To get back that data, you have to store that data somewhere which persists even after browser refreshes like
You can use session Storage or local storage.
https://javascript.info/localstorage
You can user server to store your data and use axios to fetch data using useEffect hook.
You can also use the npm package redux-persist or react-persist https://www.npmjs.com/package/redux-persist
I've build a pagination using react bootstrap. Everything works fine except when i refresh the page while i'm at page, let's say 3, the app refreshes and goes to page 1.
I've tried using react context but the page parameter had problems with other context parameters because i am using useEffect on them.
When you refresh a page, everything starts all over again from the beginning by default.
If you want to keep your state, there's typically two solutions :
store a part of your state in the url
store a part of your state in the localStorage
Then, on first load, try to retreive values from url or localStorage and put them in initial state values.
I'm using redux to load data from the backend in a react application. I'm loading a bunch of data with axios and then I can select one item and see the specific information in a different view. I'm rendering a "Loading" view every time I do a search in the backend. The problem is: this search is fine whenever I load the view refreshing the browser. But when I'm navigating in the own app, I use react-router-dom and I don't need to show the loading screen because it is already in the redux store.
Is there a way to tell redux or react to not make the async call if I already have the data?
Is redux-persist a solution for this? Should I do it manually with a condition in react?
I make the call in the componentDidMount method
You should pass the data from redux store down to your component as a property and you should make a check in componentDidMount or before that if data is empty or null or whatever and make a decision if you should load it after that. You don't need any 3rd party lib for data persistence (like redux-persist) since you actually have it in your redux store already persisted.