Migrating from Class to Functional

src/App.js

@@ -1,10 +1,52 @@
-import { Component } from "react";
+import { useState, useEffect } from "react";
 
 import Cardlist from "./components/card-list/card-list.component";
 import "./App.css";
 import SearchBox from "./components/search-box/search-box.component";
 
-class App extends Component {
+const App = () => {
+  const [searchField, setSearchField] = useState("");
+  const [monsters, setMonsters] = useState([]);
+  const [filteredMonsters, setFilterMonsters] = useState(monsters);
+
+  console.log("Render");
+
+  useEffect(() => {
+    console.log("Effect Fire");
+    fetch("https://jsonplaceholder.typicode.com/users").then((response) =>
+      response.json().then((users) => setMonsters(users))
+    );
+  }, []);
+
+  const onSearchChange = (event) => {
+    const searchFieldString = event.target.value.toLowerCase();
+    setSearchField(searchFieldString);
+  };
+
+  useEffect(() => {
+    const newFilteredMonsters = monsters.filter((monsters) => {
+      return monsters.name.toLowerCase().includes(searchField);
+    });
+
+    setFilterMonsters(newFilteredMonsters);
+  }, [monsters, searchField]);
+
+  return (
+    <div className="App">
+      <h1 className="app-title">Monster Filter</h1>
+      <SearchBox
+        onChangeHandler={onSearchChange}
+        placeHolder="Search Monsters"
+        className="monstersSearchBox"
+      />
+
+      <Cardlist monsters={filteredMonsters} />
+    </div>
+  );
+};
+
+{
+  /* class App extends Component {
   constructor() {
     super();
 
@@ -50,6 +92,7 @@ class App extends Component {
       </div>
     );
   }
+} */
 }
 
 export default App;

src/components/card-list/card-list.component.jsx

@@ -3,18 +3,28 @@ import { Component } from "react";
 import Card from "../card/card.component";
 import "./card-list.styles.css";
 
-class Cardlist extends Component {
-  render() {
-    const { monsters } = this.props;
+const Cardlist = (
+  { monsters } // Functional
+) => (
+  <div className="card-list">
+    {monsters.map((monsters) => {
+      return <Card monster={monsters} />;
+    })}
+  </div>
+);
 
-    return (
-      <div className="card-list">
-        {monsters.map((monsters) => {
-          return <Card monsterProp={monsters} />;
-        })}
-      </div>
-    );
-  }
-}
+// class Cardlist extends Component { // Class
+//   render() {
+//     const { monsters } = this.props;
+
+//     return (
+//       <div className="card-list">
+//         {monsters.map((monsters) => {
+//           return <Card monsterProp={monsters} />;
+//         })}
+//       </div>
+//     );
+//   }
+// }
 
 export default Cardlist;

src/components/card/card.component.jsx

@@ -1,21 +1,35 @@
-import { Component } from "react";
-
 import "./card.styles.css";
 
-class Card extends Component {
-  render() {
-    const { id, name, email } = this.props.monsterProp;
-    return (
-      <div className="card-container" key={id}>
-        <img
-          alt={`monster ${name}`}
-          src={`https://robohash.org/${id}?set=set2&size=180x180`}
-        />
-        <h2>{name}</h2>
-        <p>{email}</p>
-      </div>
-    );
-  }
-}
+const Card = ({ monster }) => {
+  // Functional
+  const { id, name, email } = monster;
+
+  return (
+    <div className="card-container" key={id}>
+      <img
+        alt={`monster ${name}`}
+        src={`https://robohash.org/${id}?set=set2&size=180x180`}
+      />
+      <h2>{name}</h2>
+      <p>{email}</p>
+    </div>
+  );
+};
+
+// class Card extends Component { // Class
+//   render() {
+//     const { id, name, email } = this.props.monsterProp;
+//     return (
+//       <div className="card-container" key={id}>
+//         <img
+//           alt={`monster ${name}`}
+//           src={`https://robohash.org/${id}?set=set2&size=180x180`}
+//         />
+//         <h2>{name}</h2>
+//         <p>{email}</p>
+//       </div>
+//     );
+//   }
+// }
 
 export default Card;

src/components/search-box/search-box.component.jsx

@@ -1,19 +1,27 @@
-import { Component } from "react";
 import "./search-box.styles.css";
 
-class SearchBox extends Component {
-  render() {
-    return (
-      <div>
-        <input
-          className={`search-box ${this.props.className}`}
-          type="search"
-          placeholder={this.props.placeHolder}
-          onChange={this.props.onChangeHandler}
-        />
-      </div>
-    );
-  }
-}
+const SearchBox = ({ className, placeHolder, onChangeHandler }) => (
+  <input
+    className={`search-box ${className}`}
+    type="search"
+    placeholder={placeHolder}
+    onChange={onChangeHandler}
+  />
+);
+
+// class SearchBox extends Component { //Class
+//   render() {
+//     return (
+//       <div>
+//         <input
+//           className={`search-box ${this.props.className}`}
+//           type="search"
+//           placeholder={this.props.placeHolder}
+//           onChange={this.props.onChangeHandler}
+//         />
+//       </div>
+//     );
+//   }
+// }
 
 export default SearchBox;