From bd5d4295ff1af4825b8e8e8b4097a68794d231a4 Mon Sep 17 00:00:00 2001
From: Sumanth U <157620444+Sumanth077s@users.noreply.github.com>
Date: Sat, 23 Nov 2024 17:00:52 +0530
Subject: [PATCH] Update App.js

---
 16-markdown-preview/final/src/App.js | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/16-markdown-preview/final/src/App.js b/16-markdown-preview/final/src/App.js
index 7a740fcf6..849d5bdee 100644
--- a/16-markdown-preview/final/src/App.js
+++ b/16-markdown-preview/final/src/App.js
@@ -1,23 +1,39 @@
-import React, { useState } from 'react'
-import ReactMarkdown from 'react-markdown'
+// Import React and useState for component creation and state management
+import React, { useState } from 'react';
+
+// Import ReactMarkdown for rendering Markdown syntax as HTML
+import ReactMarkdown from 'react-markdown';
 
 function App() {
-  const [markdown, setMarkdown] = useState('# markdown preview')
+  // useState hook to manage the markdown text entered by the user
+  // Initial value is set to a sample markdown string
+  const [markdown, setMarkdown] = useState('# markdown preview');
 
   return (
+    // Main wrapper for the application
     <main>
+      {/* Section to organize the input and preview areas */}
       <section className='markdown'>
+        {/* Textarea for user input */}
+        {/* className 'input' is for styling purposes */}
+        {/* value is bound to the markdown state */}
+        {/* onChange updates the markdown state as the user types */}
         <textarea
           className='input'
           value={markdown}
           onChange={(e) => setMarkdown(e.target.value)}
         ></textarea>
+        
+        {/* Article to display the rendered Markdown */}
+        {/* className 'result' is for styling purposes */}
+        {/* ReactMarkdown component renders the Markdown input as HTML */}
         <article className='result'>
           <ReactMarkdown>{markdown}</ReactMarkdown>
         </article>
       </section>
     </main>
-  )
+  );
 }
 
-export default App
+// Export the App component as the default export
+export default App;