fix(data): fix for #5156

Author: david-mcafee

src/fragments/lib/datastore/js/data-access/observe-update-snippet.mdx

@@ -25,17 +25,36 @@ function App() {
     };
   }, []);
 
+  /**
+	* Create a new Post
+	*/
+	async function onCreate() {
+		const post = await DataStore.save(
+			new Post({
+				title: `New title ${Date.now()}`,
+				rating: (function getRandomInt(min, max) {
+					min = Math.ceil(min);
+					max = Math.floor(max);
+					return Math.floor(Math.random() * (max - min)) + min;
+				})(1, 7),
+				status: PostStatus.ACTIVE,
+			})
+		);
+		setPost(post);
+	}
+
   return (
     <>
       <h1>{post?.title}</h1>
+      <input type="button" value="NEW TODO" onClick={onCreate} />
       <input
+        disabled={!post}
         type="text"
         value={post?.title ?? ""}
         onChange={({ target: { value } }) => {
           /**
            * Each keypress updates the post in local react state.
            */
-          if (!post) return;
           setPost(
             Post.copyOf(post, (draft) => {
               draft.title = value;
@@ -44,6 +63,7 @@ function App() {
         }}
       />
       <input
+        disabled={!post}
         type="button"
         value="Save"
         onClick={async () => {
@@ -87,10 +107,30 @@ function App() {
     };
   }, []);
 
+  /**
+	 * Create a new Post
+	 */
+	async function onCreate() {
+		const post: Post = await DataStore.save<Post>(
+			new Post({
+				title: `New title ${Date.now()}`,
+				rating: (function getRandomInt(min, max) {
+					min = Math.ceil(min);
+					max = Math.floor(max);
+					return Math.floor(Math.random() * (max - min)) + min;
+				})(1, 7),
+				status: PostStatus.ACTIVE,
+			})
+		);
+		setPost(post);
+	}
+
   return (
     <>
       <h1>{post?.title}</h1>
+      <input type="button" value="NEW TODO" onClick={onCreate} />
       <input
+        disabled={!post}
         type="text"
         value={post?.title ?? ""}
         onChange={({ target: { value } }) => {
@@ -105,6 +145,7 @@ function App() {
         }}
       />
       <input
+        disabled={!post}
         type="button"
         value="Save"
         onClick={async () => {