From d1a4ad28654880723a4c3c46c88d3cf65015e2f5 Mon Sep 17 00:00:00 2001
From: 0xprincedev <enthusiast0807@gmail.com>
Date: Thu, 30 Oct 2025 11:54:37 -0400
Subject: [PATCH 1/2] updated class based components to functional components

---
 README.md | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 42401ae6..4a20cde2 100644
--- a/README.md
+++ b/README.md
@@ -9712,11 +9712,9 @@ Technically it is possible to write nested function components but it is not sug
     For example, let us take a greeting example with JSX,
 
     ```javascript
-    class Greeting extends React.Component {
-      render() {
-        return <div>Hello {this.props.message}</div>;
-      }
-    }
+    const Greeting = ({ message }) => {
+      return <div>Hello {message}</div>;
+    };
 
     ReactDOM.render(
       <Greeting message="World" />,
@@ -9727,11 +9725,9 @@ Technically it is possible to write nested function components but it is not sug
     You can write the same code without JSX as below,
 
     ```javascript
-    class Greeting extends React.Component {
-      render() {
-        return React.createElement("div", null, `Hello ${this.props.message}`);
-      }
-    }
+    const Greeting = ({ message }) => {
+      return React.createElement("div", null, `Hello ${message}`);
+    };
 
     ReactDOM.render(
       React.createElement(Greeting, { message: "World" }, null),

From 305b3891e89e8ef6366e14e3110182c450262000 Mon Sep 17 00:00:00 2001
From: 0xprincedev <enthusiast0807@gmail.com>
Date: Thu, 30 Oct 2025 12:03:38 -0400
Subject: [PATCH 2/2] keep class based components and add functional component
 section in detail

---
 README.md | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/README.md b/README.md
index 4a20cde2..f83aa74b 100644
--- a/README.md
+++ b/README.md
@@ -9711,6 +9711,20 @@ Technically it is possible to write nested function components but it is not sug
 
     For example, let us take a greeting example with JSX,
 
+    ```javascript
+    class Greeting extends React.Component {
+      render() {
+        return <div>Hello {this.props.message}</div>;
+      }
+    }
+
+    ReactDOM.render(
+      <Greeting message="World" />,
+      document.getElementById("root")
+    );
+    ```
+
+    #### Functional component version
     ```javascript
     const Greeting = ({ message }) => {
       return <div>Hello {message}</div>;
@@ -9724,6 +9738,20 @@ Technically it is possible to write nested function components but it is not sug
 
     You can write the same code without JSX as below,
 
+    ```javascript
+    class Greeting extends React.Component {
+      render() {
+        return React.createElement("div", null, `Hello ${this.props.message}`);
+      }
+    }
+
+    ReactDOM.render(
+      React.createElement(Greeting, { message: "World" }, null),
+      document.getElementById("root")
+    );
+    ```
+
+    #### Functional component version
     ```javascript
     const Greeting = ({ message }) => {
       return React.createElement("div", null, `Hello ${message}`);