React-grid-layout: item contents are overwritten (rerendered) if item state changes

[daumann]

This more like a question than an issue.

I am working on a widget dashboard project, using DC for charts drawn on the widgets.
Similar to the example I have a createElement function bound to this.state.items (or in my case this.props.layout).

The problem is that when createElement is triggered (for example when toggling static or changing the id of items) it rerenders the anchor div of the widget and overwrites the chart which was drawn as child of it. (for example:
<div id={"content_" + this.props.id} className="widgetContent"> /* chart content is later kept here but gets overwritten on rerender */ </div>)
As most projects will have a similar architecture I am sure there is an easy solution for this problem?

[daumann]

Update:

I tried blocking overwrites by putting the chart placeholder div in a separate class (included in the createElement render jsx) and preventing it from ever updating with:

    shouldComponentUpdate: function() {
        // Let's just never update this component again.
        return false;
    },

Unfortunately, it turns out the element is not updated but gets removed and newly created. @STRML is this expected behavior when toggling items to static or modifying the id of the items?

[STRML]

Yes, for now this is expected behavior as the actual <Resizable> and <Draggable> component wrappers are removed in this case.

I intend to change this in RGLv2. In the meantime, you can mitigate this by setting a class like .static and using that to remove the resizable handle, and also setting draggableHandle=".matches-nothing" (or any other class that doesn't exist in your component). Then the wrappers will still be there and the component won't reset, but they will not be practically resizable or draggable.

Hacky, I know. But it'll get you there until v2.

[daumann]

Thanks it worked! Do you have an ETA on v2 yet?