Q:

How to show store timings in slots form?

Background:
I have store timings coming in JSON format as below:
[   {
      "dayOfWeek":"MONDAY",
      "openTime":"06:30",
      "closeTime":"21:00"

},
   {
      "dayOfWeek":"TUESDAY",
      "openTime":"06:30",
      "closeTime":"21:00"

},
   {
      "dayOfWeek":"WEDNESDAY",
      "openTime":"06:30",
      "closeTime":"21:00"

},
   {
      "dayOfWeek":"THURSDAY",
      "openTime":"06:30",
      "closeTime":"21:00"

},
   {
      "dayOfWeek":"FRIDAY",
      "openTime":"06:30",
      "closeTime":"21:00"

},
   {
      "dayOfWeek":"SATURDAY",
      "openTime":"06:30",
      "closeTime":"21:00"

},
   {
      "dayOfWeek":"SUNDAY",
      "openTime":"06:30",
      "closeTime":"21:00"

}
]

I need to show timings on UI in form of slots (MONDAY-SUNDAY 14:00-20:00) as per screenshot below:

There can be multiple slots if timings are changed.
Approach:
const createBusinessHoursMap = (businessHours) => {
const openingHoursMap = new Map();
const openingHoursToDisplay = [];

businessHours.forEach((businessHour) => {
    const key = businessHour.openTime + " - " + businessHour.closeTime;
    if (!openingHoursMap.has(key)) {
        const value = [];
        value.push(businessHour.dayOfWeek);
        openingHoursMap.set(key, [...value]);
    } else if (openingHoursMap.has(key)) {
        openingHoursMap.get(key).push(businessHour.dayOfWeek);
    }
});

for (let [key, value] of openingHoursMap) {
    const timings = key;
    const days = [...value];
    if (days.length > 1) {
        openingHoursToDisplay.push(
            <React.Fragment>
                <br />
                &nbsp;<font>{days[0] + " - " + days[days.length - 1]}</font>&nbsp;
                <font>{timings}</font>
                <br />
            </React.Fragment>
        );
    } else if (days.length === 1) {
        openingHoursToDisplay.push(
            <React.Fragment>
                <br />
                &nbsp;<font>{days[0]}</font>&nbsp;
                <font>{timings}</font><span />
                <br />
            </React.Fragment>
        );
    }
};
return openingHoursToDisplay;
};

Code Explanation:
I am leveraging Map, key being openTime-closeTime and value being the array of days falling in that particular timings.
Now iterating over Map and if days array length is greater than 1, pushing react element containing first and last index of days array (value of Map) and timings (key of Map) to another array openingHoursToDisplay. 
Problem:
For Example: Monday to Friday has timings 08:00-21:00 excluding Wednesday. On UI it'll be shown like:
Monday-Friday 08:00-21:00
Wednesday 09:00-22:00 (For example Wednesday has this timings)
From UI perspective it's not the correct information being shown to user as at first glance it seems like Monday-Friday includes Wednesday as well.
Question:
How can I properly show this information to user? 
Thanks for the help in advance. 

A:

If collapsing consequent days, having the same openTime and closeTime, works for you, you can make use of Array.prototype.reduce() method.
Following is a distilled demo:

const { render } = ReactDOM,
      rootNode = document.getElementById('root')
      
const sampleData = [{"dayOfWeek":"MONDAY","openTime":"08:00","closeTime":"21:00"},{"dayOfWeek":"TUESDAY","openTime":"08:00","closeTime":"21:00"},{"dayOfWeek":"WEDNESDAY","openTime":"09:00","closeTime":"22:00"},{"dayOfWeek":"THURSDAY","openTime":"08:00","closeTime":"21:00"},{"dayOfWeek":"FRIDAY","openTime":"08:00","closeTime":"21:00"},{"dayOfWeek":"SATURDAY","openTime":"08:00","closeTime":"21:00"},{"dayOfWeek":"SUNDAY","openTime":"08:00","closeTime":"21:00"}]

const Component = ({openingHours}) => {
  const hours = openingHours
    .reduce((r, {dayOfWeek, openTime, closeTime}, i, s) => (
      i && s[i-1].closeTime == closeTime && s[i-1].openTime == openTime ?
      r[r.length-1].days.push(dayOfWeek) :
      r.push({days:[dayOfWeek], openTime, closeTime}),
    r), [])
    .reduce((r,{days,openTime,closeTime}) => (
      days.length > 1 ?
      r.push(
        `${[days.shift(),days.pop()]
          .map(day => day.slice(0,1)+day.slice(1).toLowerCase())
          .join(!days.length ? ', ' : '-')} ${openTime}-${closeTime}`) :
      r.push(
        `${days[0].slice(0,1)+days[0].slice(1).toLowerCase()} ${openTime}-${closeTime}`),
    r),[])
  
  return (
    <div>{hours.map((e,i) => <div key={i}>{e}</div>)}</div>
  )
}

render(<Component openingHours={sampleData} />, rootNode)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

