Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 2,992,279 members, 7,288,885 topics. Date: Friday, 03 February 2023 at 01:35 PM

I Need Help With This React Code. - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / I Need Help With This React Code. (355 Views)

Best Ways To Write Cleaner React Code (2) (3) (4)

(1) (Reply) (Go Down)

I Need Help With This React Code. by Rgade: 9:28pm On Jul 07, 2022
I believe the code is fairly explanatory.
data.comments
is an array of comments which I’m passing down as the initial value of
comments
through the
commentsArray
state.
Now I’m trying to preserve this value
comments
in local storage. When I add a comment and check local storage I can see that the array is stored there with all the comments.
But whenever I refresh the browser all the comments are gone from the UI sad
I don’t know what I’m screwing up

Re: I Need Help With This React Code. by jbreezy: 9:37pm On Jul 07, 2022
Your data keeps disappearing because you didn't retrieve the previously stored data in your local storage before storing a new data. You have to first retrieve d stored data in your local storage, spread it with the current data you want to store, then stringify.
Re: I Need Help With This React Code. by Karleb(m): 9:39pm On Jul 07, 2022
jbreezy:
Your data keeps disappearing because you didn't retrieve the previously stored data on your local storage before storing a new data. You have to first retrieve d stored data in your local storage, spread it with the current data you want to store, then stringify.

Mark this answer as the best answer. cheesy
Re: I Need Help With This React Code. by jbreezy: 9:41pm On Jul 07, 2022
Karleb:


Mark this answer as the best answer. cheesy

Thanks.
Re: I Need Help With This React Code. by Rgade: 10:27pm On Jul 07, 2022
jbreezy:
Your data keeps disappearing because you didn't retrieve the previously stored data in your local storage before storing a new data. You have to first retrieve d stored data in your local storage, spread it with the current data you want to store, then stringify.
Hmm do you mind showing me how?
I tried doing it and now it’s throwing exceeded quota error.
Re: I Need Help With This React Code. by GREATIGBOMAN: 11:09pm On Jul 07, 2022
Your problem is visible enough in your last code.


You are setting comments again to an empty array or object.


on the second line of your code you are setting comments to commentArray.


now when your page refresh, at the top comments will be set to commentArray which is the initial


and then your useEffect will run again and setItem to comments which is probably empty at this time

so many comments comments variables mehn
Re: I Need Help With This React Code. by Karleb(m): 11:29pm On Jul 07, 2022
Rgade:

Hmm do you mind showing me how?
I tried doing it and now it’s throwing exceeded quota error.

Share the code giving you error

comments = [... comments, newComment]

Before store to local storage should suffice
Re: I Need Help With This React Code. by chukwuebuka65(m): 3:17pm On Jul 08, 2022
Do this: setComentsArray( prevcomment => [ …prevcomment, Comments ] ). Instead of setCommentsArray( Comments )

Also do this: useEffect( () => {
return ( ) => { local storage.setItems(“comments”, comments) }}) . Instead of the way u did it
Re: I Need Help With This React Code. by chukwuebuka65(m): 3:18pm On Jul 08, 2022
Rgade:
I believe the code is fairly explanatory.
data.comments
is an array of comments which I’m passing down as the initial value of
comments
through the
commentsArray
state.
Now I’m trying to preserve this value
comments
in local storage. When I add a comment and check local storage I can see that the array is stored there with all the comments.
But whenever I refresh the browser all the comments are gone from the UI sad
I don’t know what I’m screwing up

Read my comment above

(1) (Reply)

Suggestion Needed Please / What Is Telegram Bots? / Impact Of Web Design On The Content Marketing Strategies!

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2023 Oluwaseun Osewa. All rights reserved. See How To Advertise. 48
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.