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

---
 src/components/Hero.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Hero.js b/src/components/Hero.js
index 0132d2d..d9c24af 100644
--- a/src/components/Hero.js
+++ b/src/components/Hero.js
@@ -1,26 +1,26 @@
 import React from 'react';
 
-const Hero = props => {
+const Hero = ({ onSelect, hero, selectedHero, onDelete }) => {
   return (
     <li
-      onClick={() => props.onSelect(props.hero)}
-      className={props.hero === props.selectedHero ? 'selected' : ''}
+      onClick={() => onSelect(hero)}
+      className={hero === selectedHero ? 'selected' : ''}
     >
       <button
         className="delete-button"
-        onClick={e => props.onDelete(e, props.hero)}
+        onClick={e => onDelete(e, hero)}
       >
         Delete
       </button>
       <div className="hero-element">
         <div className="badge">
-          {props.hero.id}
+          {hero.id}
         </div>
         <div className="name">
-          {props.hero.name}
+          {hero.name}
         </div>
         <div className="saying">
-          {props.hero.saying}
+          {hero.saying}
         </div>
       </div>
     </li>