Prop-types hoan thanh

Author: DEVfancybear

example_1/package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "classnames": "^2.2.6",
+    "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "3.3.0"

example_1/src/App.js

@@ -13,7 +13,7 @@ class App extends Component {
         { title: "Đi shopping", isComplete: true },
         { title: "Đi siêu thị", isComplete: false },
         { title: "Nấu Cơm", isComplete: false },
-        { title: "Rửa Bát", isComplete: true }
+        { title: "Rửa Bát", isComplete: false }
       ]
     };
     this.onKeyUp = this.onKeyUp.bind(this);

example_1/src/components/ItemTodo.js

@@ -1,9 +1,10 @@
 import React, { Component } from "react";
+import PropTypes, { shape, bool } from "prop-types";
 import "./ItemTodo.css";
 import classNames from "classnames";
 import imgCheck from "../img/check.svg";
 import imgCheckDone from "../img/success.svg";
-class ItemTodo extends Component {
+class ItemTodo extends React.Component {
   render() {
     const { item, onClick } = this.props;
     let url = imgCheck;
@@ -22,4 +23,11 @@ class ItemTodo extends Component {
     );
   }
 }
+ItemTodo.propTypes = {
+  item: PropTypes.shape({
+    isComplete: PropTypes.bool.isRequired,
+    title: PropTypes.string.isRequired
+  }),
+  onClick: PropTypes.func.isRequired
+};
 export default ItemTodo;