Add author in userState & implemnet to display the author

HossainAraf · Aug 28, 2023 · 6209a2e · 6209a2e
1 parent 3e830a2
commit 6209a2e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/components/DisplayQuote.js b/src/components/DisplayQuote.js
@@ -3,6 +3,7 @@ import '../styles/display-quote.css';
 
 const QuoteComponent = () => {
   const [quote, setQuote] = useState(null);
+  const [author, setAuthor] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
 
@@ -20,6 +21,7 @@ const QuoteComponent = () => {
         const response = await fetch(apiURL, options);
         const data = await response.json();
         setQuote(data[0].quote);
+        setAuthor(data[0].author);
         // console.log(data[0]);
       } catch (error) {
         setError(true);
@@ -39,9 +41,10 @@ const QuoteComponent = () => {
         </div>
       )}
       {quote && (
-        <div id="display-joke">
+        <div id="display-quote">
           <h4>Quote:</h4>
           <p>{quote}</p>
+          <p id="author">{author}</p>
         </div>
       )}
     </div>

diff --git a/src/styles/display-quote.css b/src/styles/display-quote.css
@@ -15,3 +15,7 @@
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   margin-top: 1.5%;
 }
+
+#display-quote #author {
+  color: #463535;
+}