React Js Fetch Data from API | load data without reloading page

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      const { useState, useEffect } = React;

// Define the App component
      const App = () => {
        const [dataLoaded, setDataLoaded] = useState(false);
        const [items, setItems] = useState([]);
        const [showToast, setShowToast] = useState(false);
        const [toastMessage, setToastMessage] = useState("");

const showToastMessage = (message) => {
          setShowToast(true);
          setToastMessage(message);
          setTimeout(() => {
            hideToastMessage();
          }, 3000); // Hide the toast after 3 seconds
        };

const hideToastMessage = () => {
          setShowToast(false);
          setToastMessage("");
        };

useEffect(() => {
          loadData(); // Initial data load

const intervalId = setInterval(() => {
            loadData(); // Load data every 6 sec (adjust the interval as needed)
          }, 6000); // 6 sec in milliseconds

return () => clearInterval(intervalId); // Cleanup the interval on component unmount
        }, []);

return (
          <div className="container">
            <h3>
              React Js load data without reloading page | Automatically Reload
              Data
            </h3>
            {dataLoaded ? (
              <table className="currency-table">
                <thead>
                  <tr>
                    <th>Code</th>
                    <th>Symbol</th>
                    <th>Rate</th>
                    <th>Description</th>
                    <th>Rate Float</th>
                  </tr>
                </thead>
                <tbody>
                  {Object.entries(items).map(([key, item]) => (
                    <tr key={key}>
                      <td>{item.code}</td>
                      <td>{item.symbol}</td>
                      <td>{item.rate}</td>
                      <td>{item.description}</td>
                      <td>{item.rate_float}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            ) : (
              <div>Loading...</div>
            )}
            {showToast && <div id="toast">{toastMessage}</div>}
          </div>
        );
      };

ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
      /* Styles for the container */
      .container {
        margin: 30px;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12),
          0 2px 4px 0 rgba(0, 0, 0, 0.24);
      }

/* Styles for the table */
      .currency-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
      }

.currency-table th,
      .currency-table td {
        padding: 12px;
        text-align: left;
      }

.currency-table th {
        background-color: #f2f2f2;
        border-bottom: 1px solid #ddd;
      }

.currency-table tbody tr:nth-child(even) {
        background-color: #f9f9f9;
      }

.currency-table tbody tr:hover {
        background-color: #f2f2f2;
      }

/* Styles for the toast */
      #toast {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 20px;
        background-color: #333;
        color: #fff;
        border-radius: 4px;
      }
    </style>
  </body>
</html>

 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      const { useState, useEffect } = React;
​
      // Define the App component
      const App = () => {
        const [dataLoaded, setDataLoaded] = useState(false);
        const [items, setItems] = useState([]);
        const [showToast, setShowToast] = useState(false);
        const [toastMessage, setToastMessage] = useState("");
​
        const loadData = () => {
          axios
            .get("https://api.coindesk.com/v1/bpi/currentprice.json")
            .then((response) => {
              setDataLoaded(true);
              setItems(response.data.bpi);
              showToastMessage("Data reloaded successfully!");
            })
            .catch((error) => {
              console.error(error);
            });
        };
​
        const showToastMessage = (message) => {
          setShowToast(true);
          setToastMessage(message);
          setTimeout(() => {
            hideToastMessage();
          }, 3000); // Hide the toast after 3 seconds
        };
​
        const hideToastMessage = () => {
          setShowToast(false);
          setToastMessage("");
        };
​
        useEffect(() => {
          loadData(); // Initial data load
​
          const intervalId = setInterval(() => {
            loadData(); // Load data every 6 sec (adjust the interval as needed)
          }, 6000); // 6 sec in milliseconds
​
          return () => clearInterval(intervalId); // Cleanup the interval on component unmount
        }, []);
​
        return (
          <div className="container">
            <h3>
              React Js load data without reloading page | Automatically Reload
              Data
            </h3>
            {dataLoaded ? (
              <table className="currency-table">
                <thead>
                  <tr>
                    <th>Code</th>
                    <th>Symbol</th>
                    <th>Rate</th>
                    <th>Description</th>
                    <th>Rate Float</th>
                  </tr>
                </thead>
                <tbody>
                  {Object.entries(items).map(([key, item]) => (
                    <tr key={key}>
                      <td>{item.code}</td>
                      <td>{item.symbol}</td>
                      <td>{item.rate}</td>
                      <td>{item.description}</td>
                      <td>{item.rate_float}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            ) : (
              <div>Loading...</div>
            )}
            {showToast && <div id="toast">{toastMessage}</div>}
          </div>
        );
      };
​
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
      /* Styles for the container */
      .container {
        margin: 30px;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12),
          0 2px 4px 0 rgba(0, 0, 0, 0.24);
      }
​
      /* Styles for the table */
      .currency-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
      }
​
      .currency-table th,
      .currency-table td {
        padding: 12px;
        text-align: left;
      }
​
      .currency-table th {
        background-color: #f2f2f2;
        border-bottom: 1px solid #ddd;
      }
​
      .currency-table tbody tr:nth-child(even) {
        background-color: #f9f9f9;
      }
​
      .currency-table tbody tr:hover {
        background-color: #f2f2f2;
      }
​
      /* Styles for the toast */
      #toast {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 20px;
        background-color: #333;
        color: #fff;
        border-radius: 4px;
      }
    </style>
  </body>
</html>
​