Uploading answer files

02-props-state-component-architecture/props/sean-answer-files/App.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import './App.css';
+import Pokecard from "./Pokecard";
+
+class App extends Component {
+  render() {
+    const pokemon = this.props.pokemon.map(p => {
+      return (
+        <Pokecard 
+          key={p.id}
+          name={p.name}
+          image={p.image}
+          type={p.type}
+        />
+      )
+    })
+    return (
+      <div className="App">
+        <h1 className="App-title">Pokedex</h1>
+        {pokemon}
+      </div>
+    );
+  }
+}
+
+App.defaultProps = {
+  pokemon: [
+    {
+      id: 1,
+      name: "Charmander",
+      type: "fire",
+      image: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png"
+    },
+    {
+      id: 2,
+      name: "Squirtle",
+      type: "water",
+      image: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png"
+    },
+    {
+      id: 3,
+      name: "Butterfree",
+      type: "flying",
+      image: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/12.png"
+    },
+    {
+      id: 4,
+      name: "Rattata",
+      type: "normal",
+      image: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/19.png"
+    },
+    {
+      id: 5,
+      name: "Metapod",
+      type: "bug",
+      image: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/11.png"
+    }
+  ]
+}
+
+export default App;
+

02-props-state-component-architecture/props/sean-answer-files/Pokecard.css

@@ -0,0 +1,12 @@
+.pokecard {
+  display: inline-block;
+  max-width: 175px;
+  padding: 2em;
+  border: 1px solid lightgrey;
+  border-radius: 3px;
+  margin: 20px 5px;
+  background-color: rgb(253, 253, 253);
+  -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.16);
+  -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.16);
+  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.16);
+}

02-props-state-component-architecture/props/sean-answer-files/Pokecard.js

@@ -0,0 +1,16 @@
+import React, { Component } from "react";
+import "./Pokecard.css";
+
+class PokeCard extends Component {
+    render(){
+        return(
+            <section className="pokecard">
+                <h4>{this.props.name}</h4>
+                <img src={this.props.image}/>
+                <p>Type: {this.props.type}</p>
+            </section>
+        )
+    }
+}
+
+export default PokeCard;