Closed MarisiaS closed 2 weeks ago
Could you install dayjs? please
@MarisiaS
The backend send the time with this format: "time": "17:00:00"
For formatting the time to be HH:MM in the frontend, I found two options:
const formattedData = useMemo(() => {
return data.map(item => ({
...item,
date: dayjs(item.date).format('MM/DD/YYYY'),
time: item.time.slice(0, 5),
}));
}, [data]);
Using dayjs for formating. In order to do so, dayjs is requiring to pass a complete date-time format string if not it shows invalid date. We can add a dummy date to the time and display only the HH:mm section like this:
const formattedData = useMemo(() => {
return data.map(item => ({
...item,
date: dayjs(item.date).format('MM/DD/YYYY'),
time: dayjs(`2024-01-01 ${item.time}`).format('HH:mm'),
}));
}, [data]);
Do you have any preference on how to handle this?
@MarisiaS
The backend send the time with this format: "time": "17:00:00"
For formatting the time to be HH:MM in the frontend, I found two options:
- Slicing the time string to take the first five characters:
const formattedData = useMemo(() => { return data.map(item => ({ ...item, date: dayjs(item.date).format('MM/DD/YYYY'), time: item.time.slice(0, 5), })); }, [data]);
- Using dayjs for formating. In order to do so, dayjs is requiring to pass a complete date-time format string if not it shows invalid date. We can add a dummy date to the time and display only the HH:mm section like this:
const formattedData = useMemo(() => { return data.map(item => ({ ...item, date: dayjs(item.date).format('MM/DD/YYYY'), time: dayjs(`2024-01-01 ${item.time}`).format('HH:mm'), })); }, [data]);
Do you have any preference on how to handle this?
I think the first one is more simple and straightforward.
Question: Why using useMemo to format the data? I think the data can be formatted inside the useEffect that we already have to fetch the data.