I have been trying to get react grid layout setup with my project and have been unable to merge two of the examples. Local storage and add/remove widgets

I figured I needed to also store items in LS and have been trying to get it working but with no luck. Currently, items are being stored, and layout is empty (not sure why), but the items are reset on refresh. I'm pretty sure it's because of the .map in state, but I am unsure how I can fix this.

If anything can help me I would be grateful as I have been stuck on this for awhile.

I have made a sandbox for ease of help

CodePudding user response：

I think this has to do with the fact that the first render of the ResponsiveReactGridLayout component counts as an onChange call. Therefore, it will call saveToLS() with an empty array of items. You should include a useEffect which will get the layout stored in localStorage upon page load. Then store the retrieved layout in a useState and pass this to the ResponsiveReactGridLayout component. After that you could set a flag that allows the ResponsiveReactGridLayout to update and save the layout to local storage, but this is optional.

Also, I would highly recommend changing your code from class based to functional code. Class based coding in React is mostly outdated and only used in specific use cases. Functional programming would future proof your code.