React 渲染一个条件 div 依赖数组

Question

I have a html table inside a React component that is rendered with data mapped from an array, with day tags of the week that a service is active. If the labels inside that array are Monday, Tuesday, Wednesday, Thursday and Friday, I need render an abbreviation like "Mon to Fri", instead the default render "label","label"... here is the snippet

    <td>
    {moment(start, 'HH:mm:ss').format('HH:mm')} /
    {moment(end, 'HH:mm:ss').format('HH:mm') }
    { days.flatMap((days, i) => [
      <div style={{paddingLeft:'2px', display: 'inline-block'}}>
          {days.label},
      </div>
    ]) }
    </td>

The object days its like this:

[
  {
    "label": "Mon",
    "value": "1"
  },
  {
    "label": "Tue",
    "value": "2"
  },
  {
    "label": "Wed",
    "value": "3"
  },
  {
    "label": "Thu",
    "value": "4"
  },
  {
    "label": "Fri",
    "value": "5"
  }
]

Edit: add a picture, its Spanish, but Lun = Monday, Mar= Tuesday, and so on... I'm already rendering the week days selected, Monday, Wednesday and Friday, with this code:

{ days.flatMap((days, i) => [
          <div style={{paddingLeft:'2px', display: 'inline-block'}}>{days.label},</div>
        ]) }

but, when user select the five days, Mon, Tue, Wed, Thu, Fri, I need a conditional render to match that particular case, any other case, should execute the code above.

Thanks!

Answer 1

Sounds like you just want to grab the first and last elements of the days array and compute an abbreviated interval.

 const days = [{ "label": "Mon", "value": "1" }, { "label": "Tue", "value": "2" }, { "label": "Wed", "value": "3" }, { "label": "Thu", "value": "4" }, { "label": "Fri", "value": "5" } ]; const abbreviation = [days[0], days.length > 1 && days[days.length - 1]] .filter(Boolean) .map(({ label }) => label) .join(' to '); console.log(abbreviation);

If the original data has full-length day names, use the same but update what is mapped.

 const days = [{ "label": "Monday", "value": "1" }, { "label": "Tuesday", "value": "2" }, { "label": "Wednesday", "value": "3" }, { "label": "Thursday", "value": "4" }, { "label": "Friday", "value": "5" } ]; const abbreviation = [days[0], days.length > 1 && days[days.length - 1]] .filter(Boolean) .map(({ label }) => label.slice(0,3)) .join(' to '); console.log(abbreviation);

Answer 2

Try this more simpler way

 const days = [{ "label": "Mon", "value": "1" }, { "label": "Tue", "value": "2" }, { "label": "Wed", "value": "3" }, { "label": "Thu", "value": "4" }, { "label": "Fri", "value": "5" } ]; console.log(days[0].label+' to '+days[days.length-1].label)