Open
Description
Hi guys, my issue is in relation with resizestop event + setState behaviour in React.
GIven a state called dynamicHeight, when trying to change it through resizestop, its value changes but this change is not reflected in the DOM.
Calling setDynamicHeight from another component (such as a button for example) works perfectly as it should. It is in the moment when I call setDynamicHeight from inside grid.on("resizestop", ... ) event when it stops working and the components do not "react" to the state update
any ideas why this is so?
what can be missing on resizestop event for React to not react on state changes triggered by it?
import { useEffect, useRef } from 'react';
function Demo() {
const gridContainerRef = useRef<HTMLDivElement>(null)
const [dynamicHeight, setDynamicHeight] = useState<string>("some height")
useEffect(() => {
if (gridContainerRef.current) {
const grid = GridStack.init(
{
float: false,
acceptWidgets: true,
column: 12,
minRow: 1,
},
gridContainerRef.current
);
// Here it is the thing that does not work as expected:
grid.on("resizestop", function() {
setDynamicHeight("some new height")
})
}
}, []);
useEffect(() => {
console.log('dynamicHeight changed:>>', dynamicHeight)
// This console log actually gets triggered after resizing
// and shows the correct updated value "some new height"
// but the components in the DOM don't update with it :(
}, [dynamicHeight])
const items =[{ id: 'item-1-1', x: 0, y: 0, w: 2, h: 2 }, { id: 'item-1-2', x: 2, y: 0, w: 2, h: 2 }]
return (
<div className="grid-stack" ref={gridContainerRef}>
{items.map((item, i) => {
return (
<div key={item.id} className="grid-stack-item" gs-id={item.id} gs-w={item.w} gs-h={item.h} gs-x={item.x} gs-y={item.y}>
<div className="grid-stack-item-content">
{item.id}
<div className="dynamicHeight">Some element with a dynamicHeight</div>
</div>
</div>
)
})}
</div>
)
}