Adding custom methods to React Component

Signed-off-by: Kanika <murarkakanika@gmail.com>

README.md

@@ -22,4 +22,5 @@ Following are commit based point
 2. [Introduction of JSX in code](https://github.com/a2batic/Learn-React-way/commit/7bd23c3524141b80b572e7e66e21d2d79bcdaa7c)
 3. [Introduction to React components](https://github.com/a2batic/Learn-React-way/commit/b7cf14aedb06343a141d3fb55769987ef31a7adb)
 4. [Adding properties to React components](https://github.com/a2batic/Learn-React-way/commit/f23317fd13625c7b95eafc8e488b7690f9a86c9b)
-5. [Destructuring - shortening the code]()
+5. [Destructuring - shortening the code](https://github.com/a2batic/Learn-React-way/commit/c86e60f2450029eefc1093fbc9ac4b6a87f32147)
+6. [Adding custom methods to React Component]()

src/index.js

@@ -1,6 +1,4 @@
-import React, { Component } from 'react'; // Destructuring of Component
-// React is important for any file using JSX, so importing react cant be
-// avoided even through its not used directly.
+import React, { Component } from 'react';
 import {render} from 'react-dom';
 
 let skiData = {
@@ -10,7 +8,14 @@ let skiData = {
     goal: 100
 }
 
-class SkiDayCounter extends Component { //Hence removed React from here
+class SkiDayCounter extends Component {
+  // Custom Methods in React components using ES6 class
+  getPercent = decimal => {
+    return decimal * 100 + '%';
+  }
+  calGoalProgress = (total,goal) => {
+    return this.getPercent(total/goal);
+  }
     render() {
       // Destructuring props - shorting the syntax
       const {total, powder, backcountry, goal} = this.props;
@@ -26,7 +31,7 @@ class SkiDayCounter extends Component { //Hence removed React from here
                 <p>Backcountry Days: {backcountry}</p>
               </div>
               <div>
-                <p>Goal Days: {goal}</p>
+                <p>Goal Progress: {this.calGoalProgress(total, goal)}</p>
               </div>
             </section>
         )