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

examples/DictUpdateExamples.ipynb

@@ -0,0 +1,130 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "aba8b4d5-199f-4fe0-97a2-5a2a3f43cbf2",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import ipyreact\n",
+    "from traitlets import  Int, Dict, observe"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "b11af66b-f256-4441-8c38-0283866024bd",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "class UpdateDictFromPythonWidget(ipyreact.ReactWidget):\n",
+    "    #note that when we add these traitlets, they will automatically be made available to the react component\n",
+    "    simple_dict = Dict({'foo':5, 'bar':8, 'baz':10}).tag(sync=True)\n",
+    "    count = Int(0).tag(sync=True)\n",
+    "\n",
+    "    @observe('count')\n",
+    "    def _observe_count(self, change):\n",
+    "        new_val = self.count\n",
+    "        sd = self.simple_dict.copy()\n",
+    "        sd['foo'] += 1\n",
+    "        self.simple_dict = sd\n",
+    "\n",
+    "    _esm = \"\"\"\n",
+    "    import confetti from \"canvas-confetti\";\n",
+    "    import * as React from \"react\";\n",
+    "    \n",
+    "    export const DictView = ({fullDict}) => {\n",
+    "        return (<table>\n",
+    "                  <tr><th>foo</th><th>bar</th><th>baz</th></tr>\n",
+    "                  <tr><td>{fullDict['foo']}</td><td>{fullDict['bar']}</td><td>{fullDict['baz']}</td></tr>\n",
+    "                </table>);\n",
+    "    }\n",
+    "\n",
+    "    export default function({on_count, debug, count, simple_dict}) {\n",
+    "        return <div><button onClick={() => confetti() && on_count(count + 1)}>\n",
+    "            {count} times confetti\n",
+    "        </button>\n",
+    "        <DictView fullDict={simple_dict} />\n",
+    "    </div>\n",
+    "    };\"\"\"\n",
+    "w = UpdateDictFromPythonWidget()\n",
+    "w"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "88858dd6-b2dd-4ee9-a22f-3b4a6e698212",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "class UpdateDictFromReactWidget(ipyreact.ReactWidget):\n",
+    "    #note that when we add these traitlets, they will automatically be made available to the react component\n",
+    "    simple_dict = Dict({'foo':5, 'bar':8, 'baz':10}).tag(sync=True)\n",
+    "    count = Int(0).tag(sync=True)\n",
+    "\n",
+    "    @observe('count')\n",
+    "    def _observe_count(self, change):\n",
+    "        new_val = self.count\n",
+    "        sd = self.simple_dict.copy()\n",
+    "        sd['foo'] += 1\n",
+    "        self.simple_dict = sd\n",
+    "\n",
+    "    @observe('simple_dict')\n",
+    "    def _observe_simple_dict(self, change):\n",
+    "        print(self.simple_dict)\n",
+    "    _esm = \"\"\"\n",
+    "    import confetti from \"canvas-confetti\";\n",
+    "    import * as React from \"react\";\n",
+    "    \n",
+    "    export const DictView = ({fullDict}) => {\n",
+    "        return (<table>\n",
+    "                  <tr><th>foo</th><th>bar</th><th>baz</th></tr>\n",
+    "                  <tr><td>{fullDict['foo']}</td><td>{fullDict['bar']}</td><td>{fullDict['baz']}</td></tr>\n",
+    "                </table>);\n",
+    "    }\n",
+    "\n",
+    "    export const DictUpdate = ({fullDict, set_fullDict}) => {\n",
+    "        return (<button onClick={() => {\n",
+    "        console.log('dict update')\n",
+    "                                         const newVal = {...fullDict};\n",
+    "                                         newVal['bar'] = newVal['bar']+1;\n",
+    "                                         set_fullDict(newVal)}}>increment bar</button>);\n",
+    "    }\n",
+    "\n",
+    "    export default function({on_count, debug, count, simple_dict, on_simple_dict}) {\n",
+    "        return <div><button onClick={() => confetti() && on_count(count + 1)}>\n",
+    "            {count} times confetti\n",
+    "        </button>\n",
+    "        <DictUpdate fullDict={simple_dict} set_fullDict={on_simple_dict} />\n",
+    "        <DictView fullDict={simple_dict} />\n",
+    "    </div>\n",
+    "    };\"\"\"\n",
+    "z = UpdateDictFromReactWidget()\n",
+    "z"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}