categoryListPage

src/components/CategoryEntry.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const CategoryEntry = props => {
+  const {
+    strCategory,
+    strCategoryThumb,
+    strCategoryDescription
+  } = props.category;
+  const url = `/${strCategory}`;
+  return (
+    <Link to={url}>
+      <div className="row">
+        <li key={props.key}>
+          <img src={strCategoryThumb} alt={strCategory} />
+          <h3>{strCategory}</h3> {strCategoryDescription}
+        </li>
+      </div>
+    </Link>
+  );
+};
+
+export default CategoryEntry;

src/pages/CategoryList.js

@@ -0,0 +1,25 @@
+import React from "react";
+import CategoryEntry from "../components/CategoryEntry";
+
+const CategoryListPage = props => {
+  //   const { categories } = props;
+  const categories = props.categories.categories;
+  //   if (categories.length > 0) {
+
+  //   }
+  //   const { strCategory } = categories;
+  return (
+    <div className="section">
+      <div className="container">
+        <h1>The Chef's meal categories</h1>
+        <ul>
+          {categories.map((category, i) => (
+            <CategoryEntry key={i} category={category} />
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default CategoryListPage;