import React from "react";
import { useState } from "react";
import { useEffect } from "react";
import axios from "axios";

const DataFetch = () => {
  const [coinData, setCoinData] = useState([]);

  useEffect(() => {
    async function FetchData() {
      await axios.get("https://api.hotbit.io/api/v1/allticker").then((data) => {
        setCoinData(
          data.data.ticker.sort((a, b) => a.symbol.localeCompare(b.symbol))
        );
      });
    }
    FetchData();
  }, []);

  function fetchCoin() {
    const coinArr = coinData.map((coin, i) => coin.base_volume);
    console.log(coinArr[0]);
    return coinArr;
  }

  return (
    <table className="table-auto border-separate border border-slate-500">
      <thead>
        <tr>
          <th className="border border-slate-600">Cặp</th>
          <th className="border border-slate-600">Giá</th>
          <th className="border border-slate-600">BaseVol</th>
          <th className="border border-slate-600">QuoteVol</th>
        </tr>
      </thead>
      <tbody>
        {coinData.map((coin, idx) => (
          <tr key={idx} c>
            <td className="border border-slate-600">{coin.symbol}</td>
            <td className="border border-slate-600">{coin.buy}</td>
            <td className="border border-slate-600">{coin.base_volume}</td>
            <td className="border border-slate-600">{coin.quote_volume}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default DataFetch; I have a question. ( sorry for my grammar cuz I am a Vietnamese)

I have created a react project for creating a table of coin pair, coin price, coin volume. I have fetched data from that API above. My table rerenders once my data is updated.So, I wanna calculate the difference of volume of each coin pair between Twice consecutive fetching , and then convert it into percentage. Thanks for any help