added an example showing bidirectional binding between python/react for complex objects

[paddymul]

bi-directional binding between jupyter and python works... as long as you replace the entire object from both sides. As is react best practice.

[kolibril13]

Nice example!
I am wondering:
When I use the first example and type
w.simple_dict["foo"] = 3000
into the next cell, it does not directly update the table, only after pressing the button the next time the value 3000 occurs.
However, when I type

w.simple_dict = {'foo':99, 'bar':99, 'baz':99}

in the next cell, all values are updated immediately without pressing the button again.
Why is that not the case?

[kolibril13]

Suggested change

" new_val = self.count\n",

unused variable

[kolibril13]

Suggested change

" new_val = self.count\n",

[kolibril13]

and one more observation:
when I change the parameter bar in the second example

z = UpdateDictFromReactWidget()
z.simple_dict["bar"] = 3000

bar does not update to 3000 as well when I press the increment bar button.
bar only gets the new value after pressing the times confetti button.
As before,
z.simple_dict = {'foo':2, 'bar':2, 'baz':2} updates everything immediately.

[maartenbreddels]

Note that trailets doesn’t detect mutations of objects, only assignment. This reflect the Python language. Not something we can change I think.

On Fri, 28 Apr 2023 at 12:01, Jan-Hendrik Müller ***@***.***> wrote: and one more observation: when I change the parameter bar in the second example z = UpdateDictFromReactWidget() z.simple_dict["bar"] = 3000 bar does not update to 3000 as well when I press the increment bar button. bar only gets the new value after pressing the times confetti button. As before, z.simple_dict = {'foo':2, 'bar':2, 'baz':2} updates everything immediately. — Reply to this email directly, view it on GitHub <#9 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AANPEPL5QM443K3SS2XLYODXDOIONANCNFSM6AAAAAAXLGOXBM> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

-- Maarten Breddels Co-Founder of Widgetti <https://widgetti.io/> Your partner for Jupyter- and data-apps Tel: +31 6 2464 0838 <+31+6+24640838> [image: Twitter] <https://twitter.com/maartenbreddels>[image: Github] <https://github.com/maartenbreddels>[image: LinkedIn] <https://linkedin.com/in/maartenbreddels>

[maartenbreddels]

Useful example! I think a few comments would help get the message across.

[maartenbreddels]

Suggested change

	" #note that when we add these traitlets, they will automatically be made available to the react component\n",
	" #note that when we add these traits with sync=True, they will automatically be made available to the react component\n",

[maartenbreddels]

Maybe add a note saying that traitlets cannot detect mutations to a dict, and therefore we need to make a copy.

[maartenbreddels]

Also could use a comment here that we do a (shallow) copy so we don't mutate the original object, otherwise changes detection would go unnoticed.