2

I am working with react-grid-layout and creating some grids which are drag-drop as well as resizable.

So i am able to achieve that and it is working fine.

My UI is like I have two tabs and each tab have some grids, so when I move from one tab two other I am showing that tab's grid.

What I am trying to do

On change of layout I want to store that layout to local storage so that when I refresh or open that tab again the formation of grid should be the one which I changed.

So as per mentioned in library I am using this

  • So what I am doing is when ever onLayoutChange happens I am storing the layout with respect to my active_tab and when I change from one to other tab I am checking Local storage and matching which tab is active and getting that particular layout.
  • But this is not happening it is just taking the basic layout.

What I did

    function getFromLS(key) {
  let ls = {};
  if (global.localStorage) {
    try {
      ls =
        JSON.parse(
          global.localStorage.getItem(localStorage.getItem("active_tab"))
        ) || {};
    } catch (e) {
      /*Ignore*/
    }
    return ls[key];
  }
}
function saveToLS(key, value) {
  if (global.localStorage) {
    global.localStorage.setItem(
      localStorage.getItem("active_tab"),
      JSON.stringify({
        [key]: value
      })
    );
  }
}
  • Onchange function of layout

     const onLayoutChange = (layout, layouts) => {
     saveToLS("layouts", layouts);
     console.log("onchange");
     setlayouts({ layouts });
      };
    

Edit / Update

I have updated my code sandbox as earlier it was taking layouts on console ans undefined now it is taking the layout, Here is the updated code sandbox

manish thakur
  • 760
  • 9
  • 35
  • 76
  • Put a `console.log(layouts)` inside `onLayoutChange`. That's the first step to debug this. See if `layouts` object is as you intended or not. – Lakshya Thakur Mar 19 '21 at 06:11
  • Yes I did all this – manish thakur Mar 19 '21 at 06:58
  • Can you share the result of those `logs` ? Are you seeing the correct value as intended or not ? Such details help to debug faster. – Lakshya Thakur Mar 19 '21 at 06:59
  • @LakshyaThakur I can share but you can also check, I have shared code sandbox Link for these things, the log is bit bigger you can se https://codesandbox.io/s/practical-river-j58kg?file=/src/App.js here. As I checked it is taking undefined, Which I don't know how ? – manish thakur Mar 19 '21 at 07:17
  • @LakshyaThakur I have edited my post and included updated code sandbox https://codesandbox.io/s/practical-river-j58kg?file=/src/App.js here the console is showing the layouts you can check. – manish thakur Mar 19 '21 at 07:35
  • Hey, @manishthakur did you achieve this, I have the same problem cannot save in local storage, thanks – Denis Sep 15 '22 at 14:38

1 Answers1

1

The solution is run generateDOM once for each active_menu:

  const [DOM, setDOM] = useState(null)  

  useEffect(() => {
    setDOM(generateDOM(data1[active_menu].comp_data))
  }, [data1, active_menu]);

data1 should also be in dependencies because need to recalculate "DOM" when adding and removing elements.

render:

  <ResponsiveReactGridLayout
    {...props}
    onLayoutChange={(layout, layouts) => onLayoutChange(layout, layouts)}
    layouts={layouts}
    cols={{ lg: 12, md: 4, sm: 6, xs: 4, xxs: 2 }}
  >
    {DOM} 
  </ResponsiveReactGridLayout>  

also I changed localStorage.getItem("active_tab") to active_menu

codesandbox

Daniil Loban
  • 4,165
  • 1
  • 14
  • 20
  • Sir I tried you code and it worked fine, but I got to ask one question i.e how to do conditional rendering. if case `empName==="steve` then w = 6 `else` 4 I tried `if (item.empName === "steve") { return { x: (i * 2) % 12, y: Math.floor(i / 6), w: 2, h: 4, i: i.toString() }; } else { return { x: (i * 2) % 12, y: Math.floor(i / 6), w: 4, h: 2, i: i.toString() }; }` I tried with this but not worked – vivek singh May 19 '21 at 20:09