5

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "react",
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": ["last 2 versions"]
+        }
+      }
+    ]
+  ],
+  "plugins": ["transform-class-properties"]
+}

.eslintrc.json

@@ -11,6 +11,7 @@
     "react/prop-types": 0
   },
   "plugins": ["react", "import", "jsx-a11y"],
+  "parser": "babel-eslint",
   "parserOptions": {
     "ecmaVersion": 2018,
     "sourceType": "module",

package.json

@@ -20,6 +20,11 @@
   },
   "homepage": "https://github.com/btholt/complete-intro-to-react-v4#readme",
   "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^8.2.6",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
     "eslint": "^5.3.0",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-import": "^2.13.0",

src/Carousel.js

@@ -0,0 +1,50 @@
+import React from "react";
+
+class Carousel extends React.Component {
+  state = {
+    photos: [],
+    active: 0
+  };
+  static getDerivedStateFromProps({ media }) {
+    let photos = [];
+    if (media && media.photos && media.photos.photo) {
+      photos = media.photos.photo.filter(photo => photo["@size"] === "pn");
+    }
+
+    return { photos };
+  }
+  handleIndexClick = event => {
+    this.setState({
+      active: +event.target.dataset.index
+    });
+  };
+  render() {
+    const { photos, active } = this.state;
+
+    let hero = "http://placecorgi.com/300/300";
+    if (photos[active] && photos[active].value) {
+      hero = photos[active].value;
+    }
+
+    return (
+      <div className="carousel">
+        <img src={hero} alt="animal" />
+        <div className="carousel-smaller">
+          {photos.map((photo, index) => (
+            /* eslint-disable-next-line */
+            <img
+              onClick={this.handleIndexClick}
+              data-index={index}
+              key={photo.value}
+              src={photo.value}
+              className={index === active ? "active" : ""}
+              alt="animal thumnbail"
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Carousel;