From b1c466a7b9b45de98a8a5587dea5a6a0560803c3 Mon Sep 17 00:00:00 2001
From: Kirankumar Ambati <kiran.chinna12520@gmail.com>
Date: Sun, 21 Oct 2018 07:24:13 +0530
Subject: [PATCH] Destructured props at component level

---
 src/components/EditHero.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/EditHero.js b/src/components/EditHero.js
index 2b72df6..772c67f 100644
--- a/src/components/EditHero.js
+++ b/src/components/EditHero.js
@@ -1,45 +1,45 @@
 import React from 'react';
 
-const EditHero = props => {
-  if (props.selectedHero) {
+const EditHero = ({ selectedHero, addingHero, onChange, onSave, onCancel }) => {
+  if (selectedHero) {
     return (
       <div>
         <div className="editfields">
           <div>
             <label>id: </label>
-            {props.addingHero
+            {addingHero
               ? <input
                   type="number"
                   name="id"
                   placeholder="id"
-                  value={props.selectedHero.id}
-                  onChange={props.onChange}
+                  value={selectedHero.id}
+                  onChange={onChange}
                 />
               : <label className="value">
-                  {props.selectedHero.id}
+                  {selectedHero.id}
                 </label>}
           </div>
           <div>
             <label>name: </label>
             <input
               name="name"
-              value={props.selectedHero.name}
+              value={selectedHero.name}
               placeholder="name"
-              onChange={props.onChange}
+              onChange={onChange}
             />
           </div>
           <div>
             <label>saying: </label>
             <input
               name="saying"
-              value={props.selectedHero.saying}
+              value={selectedHero.saying}
               placeholder="saying"
-              onChange={props.onChange}
+              onChange={onChange}
             />
           </div>
         </div>
-        <button onClick={props.onCancel}>Cancel</button>
-        <button onClick={props.onSave}>Save</button>
+        <button onClick={onCancel}>Cancel</button>
+        <button onClick={onSave}>Save</button>
       </div>
     );
   } else {