chore: Improve uploadData snippets for React (#8227)

Author: cshfang

src/pages/[platform]/build-a-backend/storage/set-up-storage/index.mdx

@@ -790,30 +790,31 @@ class MyApp extends StatefulWidget {
 Next, let's a photo to the `picture-submissions/` path.
 
 <InlineFilter filters={["react", "react-native"]}>
-```javascript
+```jsx
 import React from 'react';
 import { uploadData } from 'aws-amplify/storage';
 
 function App() {
   const [file, setFile] = React.useState();
 
-  const handleChange = (event: any) => {
-    setFile(event.target.files[0]);
+  const handleChange = (event) => {
+    setFile(event.target.files?.[0]);
+  };
+
+  const handleClick = () => {
+    if (!file) {
+      return;
+    }
+    uploadData({
+      path: `picture-submissions/${file.name}`,
+      data: file,
+    });
   };
 
   return (
     <div>
       <input type="file" onChange={handleChange} />
-        <button
-          onClick={() =>
-            uploadData({
-              path: `picture-submissions/${file.name}`,
-              data: file,
-          })
-        }
-      >
-        Upload
-      </button>
+      <button onClick={handleClick}>Upload</button>
     </div>
   );
 }

src/pages/[platform]/build-a-backend/storage/upload-files/index.mdx

@@ -82,32 +82,33 @@ Learn more about how you can further customize the UI component by referring to
 The following is an example of how you would upload a file from a file object, this could be retrieved from the local machine or a different source.
 
 <InlineFilter filters={["react", "react-native"]}>
-```javascript
+```jsx
 import React from 'react';
 import { uploadData } from 'aws-amplify/storage';
 
 function App() {
-    const [file, setFile] = React.useState();
-
-    const handleChange = (event: any) => {
-        setFile(event.target.files[0]);
-    };
-
-    return (
-        <div>
-            <input type="file" onChange={handleChange} />
-            <button
-                onClick={() =>
-                    uploadData({
-                        path: `photos/${file.name}`,
-                        data: file,
-                    })
-                }
-            >
-                Upload
-            </button>
-        </div>
-    );
+  const [file, setFile] = React.useState();
+
+  const handleChange = (event) => {
+    setFile(event.target.files?.[0]);
+  };
+
+  const handleClick = () => {
+    if (!file) {
+      return;
+    }
+    uploadData({
+      path: `photos/${file.name}`,
+      data: file,
+    });
+  };
+
+  return (
+    <div>
+      <input type="file" onChange={handleChange} />
+      <button onClick={handleClick}>Upload</button>
+    </div>
+  );
 }
 ```
 </InlineFilter>