How do I format this time in reactjs in the correct format which is GMT+8?

Question

I have a datetime column in mysql which reads "2021-05-10 08:01:02" but when I pull it from the database it reads "2021-05-10T00:01:02.000Z" instead. my other data is 2021-05-10 10:01:02 but reads as 2021-05-15T02:01:02.000Z and also "2021-04-12 09:10:50" reads as "2021-04-12T01:10:50.000Z"

Full Stats.js frontend code

import React, { useState, useEffect } from "react";
import Navbar from "../Navbar/Navbar";
import Axios from "axios"; //axios library to make requests to api
import "./Stats.css";

function Stats() {
  const [customerList, setCustomerList] = useState([]); //store all that information of the database in a list
  //make an axios request to get information from database
  const getCustomers = () => {
    Axios.get("http://localhost:3001/customers").then((response) => {
      //console.log("successfully retrieved customers list from database");
      console.log(response.data);
      setCustomerList(response.data);
    });
  };

  
    const [currentTime, setCurrentTime] = useState(1);
  {/*}
    useEffect(() => {
      fetch("/time")
        .then((res) => res.json())
        .then((data) => {
          setCurrentTime(data.time);
        });
    }, []);
  

    useEffect(() => {
      fetch("/time")
        .then((res) => res.json())
        .then((data) => {
          const dateStr = new Date(data.time).toLocalDateString('en-CA');
          const timeStr = new Date(data.time).toLocalTimeString();
          const dateTime = `${dateStr} ${timeStr}`;
          setCurrentTime(dateTime);
        });
    }, []);
    */}
    
  return (
    <div>
      <Navbar />
      <div className="container">
      <h1>Dashboard</h1>
      <button onClick={getCustomers}>Show Dashboard</button>
      </div>
      <table className="customertable">
        <thead>
        <tr>
          <th>S/N</th>
          <th>Customer Name</th>
          <th>Customer Email</th>
          <th>Counts of Visit</th>
          <th>Latest Time of Visit</th>
          <th>Contacted?</th>
        </tr>
        </thead>
        <tbody>
        {customerList.map((val, key) => {
          return (
            <tr>
              <td>{val.ID}</td>
              <td>{val.name}</td>
              <td>{val.email}</td>
              <td>{val.counts_of_visit}</td>
              <td>{val.latest_time_of_visit}</td>
              <td>{val.contacted}</td>
            </tr>
          );
        })}
        </tbody>
      </table>
    </div>
  );
}

export default Stats;

Here is my backend .js code for reference

//set up express server
const express = require("express");
const app = express();
//set up sql server
const mysql = require("mysql");
const cors = require("cors");

app.use(cors());
app.use(express.json());
//create a variable called db to make your SQL Statements
const db = mysql.createConnection({
  user: "",
  host: "",
  password: "",
  database: "",
});

//GET REQUEST to database to retrieve customers information from database
app.get("/customers", (req, res) => {
  db.query("SELECT * FROM customer_info", (err, result) => {
    if (err) {
      console.log(err);
    } else {
      {/*}
      const dateStr = new Date(val.latest_time_of_visit).toLocalDateString('en-CA');
      const timeStr = new Date(val.latest_time_of_visit).toLocalTimeString();
      const dateTime = `${dateStr} ${timeStr}`;
    */}
      res.send(result);
    }
  });
});

//check if backend server is running
app.listen(3001, () => {
  console.log("Your server is running on port 3001");
});

Answer 1

Just as @charles-bamford commented, you can use any date library to format your date as you like; date-fns is a famous one for that purpose.

Also, you can manually use the date object in JS to format the date as you like, and Intl.DateTimeFormat could also be helpful. Here is a quick code that might help you using the native Date object methods.

In the use-Effect method:

   useEffect(() => {
      fetch("/time")
        .then((res) => res.json())
        .then((data) => {
          const dateStr = new Date(data.time).toLocalDateString('en-CA');
          const timeStr = new Date(data.time).toLocalTimeString();
          const dateTime = `${dateStr} ${timeStr}`;
          setCurrentTime(dateTime);
        });
    }, []);

In case you want the val.latest_time_of_visit to have the same value as the above currentTime has, you you can use the same code as above, but with the specific respective value just before returning the component.

Like the following:

return (
    <div>
      <Navbar />
      <h1>Statistics:</h1>
      <button onClick={getCustomers}>Show Dashboard</button>
      <table className="customertable">
        <tr>
          <th>S/N</th>
          <th>Customer Name</th>
          <th>Customer Email</th>
          <th>Counts of Visit</th>
          <th>Latest Time of Visit</th>
          <th>Contacted?</th>
        </tr>
        {customerList.map((val, key) => {
          const dateStr = new Date(val.latest_time_of_visit).toLocalDateString('en-CA');
          const timeStr = new Date(val.latest_time_of_visit).toLocalTimeString();
          const dateTime = `${dateStr} ${timeStr}`;

          return (
            <tr>
              <td>{val.ID}</td>
              <td>{val.name}</td>
              <td>{val.email}</td>
              <td>{val.counts_of_visit}</td>
              <td>{dateTime}</td>
              <td>{val.contacted}</td>
            </tr>
          );
        })}
      </table>
    </div>
  );