rangelistcomps.js

const strongOrPlain = (bool, str) => bool
  ? `<strong>${str}</strong>`
  : str;

const RangeItemComp = ({header, start, end, highlighted}) => `<li>${
  strongOrPlain(
    highlighted,
    `${header}: ${start} - ${end}`
  )}</li>`;

const RangeListComp = (rl) => [
  '<ol>',
  ...rl.map(RangeItemComp),
  '</ol>'
];

// ---

const data = [
  { date: '2024-05-30', open: { from: '08:00am', to: '08:00pm' } },
  { date: '2024-05-31', open: { from: '08:00am', to: '08:00pm' } },
  { date: '2024-06-01', open: { from: '08:00am', to: '08:00pm' } }
];

const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

// mapping the data
const hours2RangeList = (arr) => arr.map(
  ({ date, open: { from: start, to: end } }) => ({
    header: dayNames[new Date(date).getDay()],
    start,
    end,
    highlighted: date === '2024-05-31'
  })
);

// printing the html
RangeListComp(
  hours2RangeList(data)
);