How to update Canvas props?

[real-ashwin]

I am trying to update the props passed to Canvas from a parent component.

I read this issue #31 and the PR that fixes it #48 . I am trying to do something like the example in the PR. But I don't see the props cascading to the Canvas.

I created this codesandbox - https://codesandbox.io/s/craft-column-layout-current-version-forked-rfrn4?file=/src/App.tsx . In App.tsx, see line 64 where the canvas is being rendered and line 31 where the count is being rendered.

I was expecting the count to update but it does not. Is this possible?

Thanks !!

[ankri]

Mhm there seems to be a bug there. 🤔

But I have two workarounds for you:

In Codesandbox 1 we're relying on the fact that ColumnLayout only has one Column as its descendant. Everytime count updates we find that child node and update its props with actions.setProps.
In the column we use the props we get from useNode and can now render. But that solution is more of a proof of concept, that it is possible to update the props. It's not really feasible for "real-life" applications.

The workaround in Codesandbox 2 is much easier and easy to miss. We rely on the fact that React re-renders when the key of a component changes. So every time count is updated we update the key of the Column which results in a re-render, which results in updating the prop.
But in this solution we see the Column flashing while it is re-rendering. So also not a nice workaround.

Maybe there is a more obvious solution, or maybe @prevwong knows why the fix in #48 isn't working anymore.

[real-ashwin]

Thank you for the 2 codesandboxes. Reading through them shows the many ways we can work with this library.

I think I can use the solution in 1. Let me try it out on my end.

[ankri]

I attempted to add a fix in #191 but that's not final yet, because this results in one too many renders. Will have to look into that again.