From aff8bae024eb23e1ee9747c586fbd25f8240ca08 Mon Sep 17 00:00:00 2001
From: boluwatifee1 <boluwatifee4@gmail.com>
Date: Mon, 1 Aug 2022 02:22:45 +0100
Subject: [PATCH 1/2] README.md Updated: Updated code integration from class
 component to functional component and made it more understanding

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

diff --git a/README.md b/README.md
index 2467cd147..6b9f2ef50 100644
--- a/README.md
+++ b/README.md
@@ -44,53 +44,89 @@ import 'react-date-range/dist/theme/default.css'; // theme css file
 
 ### `DatePicker`
 ```javascript
+import React from 'react';
+import 'react-date-range/dist/styles.css'; // main style file
+import 'react-date-range/dist/theme/default.css'; // theme css file
 import { Calendar } from 'react-date-range';
 
-class MyComponent extends Component {
-  handleSelect(date){
-    console.log(date); // native Date object
+
+function App() {
+  const handleSelect(date){
+    console.log("dateObeject:", date); // native Date object
   }
-  render(){
-    return (
-      <Calendar
+  return (
+    <div>
+         <Calendar
         date={new Date()}
-        onChange={this.handleSelect}
+        onChange={handleSelect}
       />
-    )
-  }
+    </div>
+  );
 }
-
 ```
 
+
 ### `DateRangePicker / DateRange`
 ```javascript
+import React from 'react';
+import 'react-date-range/dist/styles.css'; // main style file
+import 'react-date-range/dist/theme/default.css'; // theme css file
 import { DateRangePicker } from 'react-date-range';
 
-class MyComponent extends Component {
-  handleSelect(ranges){
-    console.log(ranges);
-    // {
-    //   selection: {
-    //     startDate: [native Date Object],
-    //     endDate: [native Date Object],
-    //   }
-    // }
-  }
-  render(){
-    const selectionRange = {
+
+function App() {
+  const selectionRange = {
       startDate: new Date(),
       endDate: new Date(),
       key: 'selection',
     }
-    return (
-      <DateRangePicker
-        ranges={[selectionRange]}
-        onChange={this.handleSelect}
-      />
-    )
+  const handleSelect = (ranges) => {
+    console.log("ranges:", ranges); 
+    // outputs: 
+    // { 
+      // selection: { 
+        // startDate: [native Date Object], 
+        // endDate: [native Date Object] 
+        // } 
+    // }
   }
+  return (
+    <div>
+          <DateRangePicker
+          ranges={[selectionRange]}
+          onChange={handleSelect}
+        />
+    </div>
+  );
 }
 
+// import { DateRangePicker } from 'react-date-range';
+
+// class MyComponent extends Component {
+//   handleSelect(ranges){
+//     console.log(ranges);
+//     // {
+//     //   selection: {
+//     //     startDate: [native Date Object],
+//     //     endDate: [native Date Object],
+//     //   }
+//     // }
+//   }
+//   render(){
+//     const selectionRange = {
+//       startDate: new Date(),
+//       endDate: new Date(),
+//       key: 'selection',
+//     }
+//     return (
+//       <DateRangePicker
+//         ranges={[selectionRange]}
+//         onChange={this.handleSelect}
+//       />
+//     )
+//   }
+// }
+
 ```
 
 ### Options

From fe099cce8f2e4b33678d0d7e34978a903d3131f4 Mon Sep 17 00:00:00 2001
From: boluwatifee1 <boluwatifee4@gmail.com>
Date: Mon, 1 Aug 2022 02:24:32 +0100
Subject: [PATCH 2/2] README.md Updated: Updated code integration from class
 component to functional component and made it more understanding

---
 README.md | 32 ++------------------------------
 1 file changed, 2 insertions(+), 30 deletions(-)

diff --git a/README.md b/README.md
index 6b9f2ef50..c940c26e5 100644
--- a/README.md
+++ b/README.md
@@ -37,10 +37,7 @@ npm install --save react date-fns
 
 You need to import skeleton and theme styles first.
 
-```javascript
-import 'react-date-range/dist/styles.css'; // main style file
-import 'react-date-range/dist/theme/default.css'; // theme css file
-```
+
 
 ### `DatePicker`
 ```javascript
@@ -100,32 +97,7 @@ function App() {
   );
 }
 
-// import { DateRangePicker } from 'react-date-range';
-
-// class MyComponent extends Component {
-//   handleSelect(ranges){
-//     console.log(ranges);
-//     // {
-//     //   selection: {
-//     //     startDate: [native Date Object],
-//     //     endDate: [native Date Object],
-//     //   }
-//     // }
-//   }
-//   render(){
-//     const selectionRange = {
-//       startDate: new Date(),
-//       endDate: new Date(),
-//       key: 'selection',
-//     }
-//     return (
-//       <DateRangePicker
-//         ranges={[selectionRange]}
-//         onChange={this.handleSelect}
-//       />
-//     )
-//   }
-// }
+
 
 ```