Add components

src/App.js

@@ -1,25 +1,43 @@
-import logo from './logo.svg';
+import { Component } from 'react'
 import './App.css';
+import { CardList } from './components/card-list/card-list.component'
+import { SearchBox } from './components/search-box/search-box.component'
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+class App extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      monsters: [],
+      searchField: ''
+    }
+  }
+
+  componentDidMount() {
+    fetch('https://jsonplaceholder.typicode.com/users')
+      .then(response => response.json()).then(
+        users => this.setState({ monsters: users })
+      )
+  }
+
+
+  render() {
+    const { monsters, searchField } = this.state;
+    const filteredMonsters = monsters.filter(monster =>
+      monster.name.toLowerCase().includes(searchField.toLowerCase())
+    );
+
+
+    return (
+      <div className="App">
+        <SearchBox
+          placeholder='Search Monsters'
+          handleChange={e => this.setState({ searchField: e.target.value })}
+        />
+        <CardList monsters={filteredMonsters} />
+      </div >
+    );
+  }
 }
 
 export default App;