Created an input bar and a search button to display quotes with specific keywords

Author: Afsha10

quotes-react-app/src/App.js

@@ -1,15 +1,24 @@
 import {useState, useEffect} from "react";
 import './App.css';
 import Button from "./component/Button";
+import Input from "./component/Input";
+import Quote from "./component/Quote";
 
 function App() {
   const [quote, setQuote] = useState(
     {
-      quote: "loading...",
-      author: "loading..."
+      quote: "Loading quote...",
+      author: "Loading quote's author..."
     }
   );
 
+  const [keyword, setKeyword] = useState("");
+
+  const [searchQuotes, setSearchQuotes] = useState([]);
+
+
+
+
   useEffect(getRandomQuote, []);
 
   function getRandomQuote() {
@@ -18,13 +27,24 @@ function App() {
       .then(data => setQuote(data));
   }
 
+  const searchQuote = () => {
+    fetch(`https://afsha1-quote-server.glitch.me/quotes/search?term=${keyword}`)
+      .then((res) => res.json())
+      .then((data) => setSearchQuotes(data));
+      console.log(searchQuotes);
+  };
+
   return (
     <div className="App">
       <header className="App-header">
-        <h1>{quote.quote}</h1>
-        <h2>{quote.author}</h2>
-        <Button getRandomQuote={getRandomQuote} />
+        <Quote quote={quote} />
+        <Button onClickHandler={getRandomQuote} label="Get Random Quote" />
+        <Input className="searchInput" type="text" onChangeHandler={setKeyword} placeholder="Search"/>
+        <Button onClickHandler={searchQuote} label="Search Quote"/>
       </header>
+      <>
+        {searchQuotes.map((searchQuote, index) => (<Quote key={index} quote={searchQuote} />))}
+      </>
     </div>
   );
 }

quotes-react-app/src/component/Button.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-const Button = ({getRandomQuote}) => {
-    return <button onClick={getRandomQuote} >Get Random Quote</button>
+const Button = ({onClickHandler, label}) => {
+    return <button onClick={onClickHandler} >{label}</button>
 }
 
 export default Button;

quotes-react-app/src/component/Input.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+const Input = ({onChangeHandler, placeholder}) => {
+    return <input onChange={e => onChangeHandler(e.target.value)} placeholder={placeholder} />;
+}
+
+export default Input;
+

quotes-react-app/src/component/Quote.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const Quote = ({ quote }) => {
+  return (
+    <div>
+      <h1>" {quote.quote} "</h1>
+      <h2>{quote.author}</h2>
+    </div>
+  );
+};
+
+export default Quote;

server.js

@@ -59,6 +59,6 @@ function pickFromArray(myArray) {
 }
 
 //Start our server so that it listens for HTTP requests!
-const listener = app.listen(3000, function () {
+const listener = app.listen(3001, function () {
   console.log("Your app is listening on port " + listener.address().port);
 });