Update faunctional component in DispplayQuote.js

src/App.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import './App.css';
 import Calculator from './components/Calculator'; // Import the Calculator component
-import Quote from './components/DisplayQuote';
+import JokeComponent from './components/DisplayQuote';
 
 function App() {
   return (
     <div className="App">
       {/* Quotes are Displayed here */}
-      <Quote />
+      <JokeComponent />
       {/* Add the Calculator component here */}
       <Calculator />
     </div>

src/components/DisplayQuote.js

@@ -1,65 +1,50 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import '../styles/display-quote.css';
 
-const uniqueID = 'Ixgm2cYnlo7wGSvmiMQCVvfUJ6kVeTvgNZShaXEC';
-
-function Quote() {
-  const [quoteText, setQuoteText] = useState('');
-  const [authorText, setAuthor] = useState('');
-  const [categoryText, setCategory] = useState('');
-  const [isLoading, setIsLoading] = useState(true);
-  const [hasError, setHasError] = useState(false);
+const JokeComponent = () => {
+  const [joke, setJoke] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
 
   useEffect(() => {
-    const fetchQuote = async () => {
-      setIsLoading(true);
+    const myAPIKey = 'Ixgm2cYnlo7wGSvmiMQCVvfUJ6kVeTvgNZShaXEC';
+    const apiURL = 'https://api.api-ninjas.com/v1/jokes? limit=1';
+
+    const options = {
+      method: 'GET',
+      headers: { 'X-Api-Key': myAPIKey },
+    };
+
+    const fetchData = async () => {
       try {
-        const response = await fetch('https://api.api-ninjas.com/v1/quotes', {
-          headers: {
-            'X-Api-Key': uniqueID,
-          },
-        });
-        if (!response.ok) {
-          throw new Error(
-            `API request failed with status code ${response.status}.`,
-          );
-        }
+        const response = await fetch(apiURL, options);
         const data = await response.json();
-        setQuoteText(data[0].quote);
-        setAuthor(data[0].author);
-        setCategory(data[0].category);
+        setJoke(data[0].joke);
       } catch (error) {
-        setHasError(true);
+        setError(true);
       }
-      setIsLoading(false);
+      setLoading(false);
     };
-    fetchQuote();
-  }, []); // Empty dependency array to run only once on initial component mount
 
+    fetchData(); // Call the function to fetch data when the component mounts
+  }, []);
   return (
-    <div id="display-quote">
-      <h4>Quotes of the Day:</h4>
-      {isLoading && <p className="loading">Loading Quote...</p>}
-      {hasError && <p className="error">Something wrong !</p>}
-
-      {quoteText && (
-        <p className="quote">
-          &quot;
-          {quoteText}
-          &quot;
-        </p>
+    <div>
+      {loading && <p>Loading...</p>}
+      {error && (
+        <div>
+          <p>Error:</p>
+          {/* <p>{error}</p> */}
+        </div>
       )}
-      <hr />
-      <br />
-      {authorText && (
-        <p className="author-category">
-          {authorText}
-          ,&nbsp;
-          {categoryText}
-        </p>
+      {joke && (
+        <div id="display-joke">
+          <h4>Joke of the Day:</h4>
+          <p>{joke}</p>
+        </div>
       )}
     </div>
   );
-}
+};
 
-export default Quote;
+export default JokeComponent;