diff --git a/README.md b/README.md
index 2467cd147..c940c26e5 100644
--- a/README.md
+++ b/README.md
@@ -37,60 +37,68 @@ 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
+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>
+  );
 }
 
+
+
 ```
 
 ### Options