prop-types

Author: gndx

package.json

@@ -18,6 +18,7 @@
     "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.14.2",
+    "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },

src/components/CarouselItem.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import '../assets/styles/components/CarouselItem.scss';
 import playIcon from '../assets/static/play-icon.png';
 import plusIcon from '../assets/static/plus-icon.png';
@@ -19,4 +20,12 @@ const CarouselItem = ({ cover, title, year, contentRating, duration }) => (
 </div>
 );
 
+CarouselItem.propTypes = {
+  cover: PropTypes.string,
+  title: PropTypes.string,
+  year: PropTypes.number,
+  contentRating: PropTypes.string,
+  duration: PropTypes.number,
+}
+
 export default CarouselItem;

src/containers/App.jsx

@@ -16,29 +16,29 @@ const App = () => {
     <div className="App">
       <Header />
       <Search />
-
       {initialState.mylist.length > 0 &&
         <Categories title="Mi Lista">
           <Carousel>
-            <CarouselItem />
+            {initialState.mylist.map(item =>
+              <CarouselItem key={item.id} {...item} />
+            )}
           </Carousel>
         </Categories>
       }
-
       <Categories title="Tendencias">
         <Carousel>
           {initialState.trends.map(item =>
             <CarouselItem key={item.id} {...item} />
           )}
         </Carousel>
       </Categories>
-
       <Categories title="Originales de Platzi Video">
         <Carousel>
-          <CarouselItem />
+          {initialState.originals.map(item =>
+            <CarouselItem key={item.id} {...item} />
+          )}
         </Carousel>
       </Categories>
-
       <Footer />
     </div>
   );