Superhero Events

Build a React app that displays a list of superheroes with their name and image. When any part of the superhero component (name or image) is clicked, that superhero's catchphrase should show up in an alert box on the screen.

Your app should use:

• a <SuperHero/> component
• A JSON file where all the superhero information is stored. Feel free to use the JSON provided and put it in a .json file.
• .map to display the correct number of component instances (based on however many superheroes you have in your JSON file)
• An event handler function that gets passed down to the child <SuperHero/> component

Hints:

• import data from data.json will get you your data, and name it data. create-react-app has a loader that will load that file and turn it to JavaScript.
• Your .map should either go inside of your <App /> or inside a new <HeroList /> component.

JSON:

[
        {
            "name": "Cheetara",
            "show": "ThunderCats",
            "catchPhrase": "I am Cheetara. In my heart, I know I'm the strongest of my kind. The pride of my people. I am unique in this universe. And I will *not be DEFEATED*!",
            "imageName": "https://banner2.kisspng.com/20180615/qyl/kisspng-cheetara-pumyra-drawing-t-shirt-thunder-cats-5b237e78e92e19.4707270115290527929551.jpg"
        },
        {
            "name": "Skeletor",
            "show": "Masters of the Universe",
            "catchPhrase": "Listen, I am not nice, I am not kind and I am NOT WONDERFUL!",
            "imageName": "https://img.tfd.com/viSupvil/th/skeletor.jpg"
        },
        {
            "name": "Maya",
            "show": "Maya the Bee",
            "catchPhrase": "It certainly is a great day to be alive.",
            "imageName": "https://d1xfgk3mh635yx.cloudfront.net/sites/default/files/styles/original/public/image/featured/1031149-studio-100-varta-sign-licensing-deal-maya-bee.jpg?itok=j2td6KGp"
        },
        {
            "name": "Vickie",
            "show": "Vickie the Viking",
            "catchPhrase": "Ah-HA!",
            "imageName": "http://www.jedisparadise.com/4/index_htm_files/15315.jpg"
        },
        {
            "name": "Borrie Veldt",
            "show": "Die Swart Kat",
            "catchPhrase": "Die Swart Kat slaan toe.",
            "imageName": "https://cultfaction.files.wordpress.com/2016/05/swart-kat1.jpg?w=890"
        },
        {
            "name": "TinTin",
            "show": "The Calculus Affair",
            "catchPhrase": "They're trying to stop us with that ramshackle erection!",
            "imageName": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcUvceZxXfZtV0XEcH4LzN8H4JDfAiXCcTMkU0GLW417EPZhuRrg"
        },
        {
            "name": "Obelix",
            "show": "Asterix and Obelix",
            "catchPhrase": "Ils sont fous ces romains!",
            "imageName": "https://i.pinimg.com/originals/12/d2/6e/12d26eb2c5f96165c87c8e27e00df2e3.jpg"
        },
        {
            "name": "Levinia",
            "show": "Liewe Heksie",
            "catchPhrase": "O Griet!",
            "imageName": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR0McqYNmE38XgdGvqQ25x9HKfbCIghaaeNA6ZWMIsDv6d-HKMN"
        },
        {
            "name": "Zummi",
            "show": "Gummy Bears",
            "catchPhrase": "As you all know, the Great Book of Gummi will never be finished.",
            "imageName": "https://i.pinimg.com/originals/a1/19/7c/a1197cb660ee8aa01a8b52deb7a78190.jpg"
        }
    ]